webpack 之 使用篇
webpack 安装
前提条件：
确保安装了 node.js 最新版本，这是理想的起步。如果使用旧版本，可能会遇到各种问题，因为它可能缺少 webpack 功能或者缺少相关 package 包。
本地安装 (推荐)
要安装最新版本或者特定版本，请运行以下命令之一
npm install --save-dev webpack
npm install --save-dev webpack@<version>
对于大多数项目，建议本地安装。这可以使我们在引入破坏式(breaking change)变更的依赖时，更容易分别升级项目。
通常，webpack 通过运行一个或者多个 npm script，会在本地 node_modules 目录中查找安装的 webpack：
"script": {
"start": "webpack --config webpack.config.js"
}
当你在本地安装 webpack 后，你能够从 node_modules/.bin/webpack 访问它的 bin 版本。
全局安装
以下 npm 的安装方式，将使 webpack 在全局环境下可用：
npm install -global webpack
不推荐全局安装
wabpack，这样做会将项目中的webpack锁定到指定版本，并且在使用不同的webpack版本项目中，可能会导致构建失败。
webpack 起步
源代码 (/src) 用于书写和编辑的代码
分发代码 (/dist) 构建过程产生的代码最小化和优化后的"输出"目录，最终在浏览器加载
文件夹目录结构
webpack-demo
|—— package.json
|—— /dist
|—— index.html
|—— /src
|—— index.js
示例：要在index.js中打包的jquery依赖，需要在本地安装
npm install --save jquery
然后，可以在脚本中 import jquery
import $ from 'jquery'
$('body').append('<h1>hello world</h1>')
现在，通过打包来合成脚本，要在 index.html 中通过一个 <script> 标签来加载 main.js 而不是原始的 /src 中的文件
<!doctype html>
<html>
<head>
<title>起步</title>
</head>
<body>
<script src="main.js"></script>
</body>
</html>
在这个设置中，index.js 显式要求引入 jquery 必须存在，然后将它绑定到 $ (没有全局作用域污染)。通过声明模块所需依赖，webpack 能够利用这些信息去构建依赖图，然后使用图生成一个优化过的，会以正确顺序执行的 main
可以这样说，执行 npx webpack，会将我们的脚本作为 入口起点，然后 输出 为 main.js。Node 8.2+ 版本提供的 npx 命令，可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件（./node_modules/.bin/webpack）
最后结果是在浏览器中打开 index.html，如果访问正常，可以看到 hello world ~
使用一个配置文件
使用配置文件的原因：在 webpack4 中，可以无需任何配置使用，可是大多数项目会需要很复杂的设置。支持配置文件比在终端中手动输入大量命令高效的多。
创建一个取代以上使用 CLI 选项方式的配置文件 webpack.config.js
webpack-demo
|—— package.json
|—— webpack.config.js // 添加一个配置文件
|—— /dist
|—— index.html
|—— /src
|—— index.js
webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
然后再次构建
npx webpack // 默认使用
npx webpack --config webpack.config.js
如果 webpack.config.js 存在，则 webpack 命令将默认选择使用它；而使用 --config 选项是说明，可以传递任何名称的配置文件。对于拆分成多个文件的负责配置是很有用的。
NPM 脚本 (NPMScript)
如果考虑到CLI方式运行本地的 webpack 不是很方便，命令长，可以设置一个快捷方式：在 package.json 添加一个 npm 脚本 (npm script)：
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" // 添加一个 npm 脚本
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.39.3",
"webpack-cli": "^3.3.8"
},
"dependencies": {
"jquery": "^3.4.1"
}
}
现在就可以使用 npm run build 命令来代替之前使用的 npx 命令。使用 npm 的 script 可以像使用 npx 那样通过模块名引用本地安装的 npm 包。这是大多数基于 npm 的项目遵循的标准，因为它允许所有贡献者使用同一组通用脚本(如果有必要，每个 flag 都带有 --config 标志)
接着就是运行 npm run build，看看脚本是否能正常运行
通过向
npm run build命令和参数之间添加两个中横线，可以将自定义参数传递给 webpack，例如：npm run build -- --colors。
上述就是一个基本的构建过程
详见： 起步 | webpack
