Webpack 命令行参数详解

很多小伙伴在每次用到package.json中的npm scripts时，总是被里面的各种命令行参数搞得头大。本文将针对webpack，对其命令行参数进行详解，希望读者们能借此搞清楚每个参数的作用，并在使用时能知道其含义。

"scripts": {
    "build": "./node_modules/.bin/webpack --bail --progress --profile --mode production --display-chunks --display-modules --config webpack.dist.config.js"
  }

拿上述例子来说，第一个是webpack指令。本例中，由于使用的是项目中的webpack而非全局，所以直接输入了webpack的相对路径。

1. 配置相关的参数

--env：设置环境变量

--config：配置文件路径   如：--config webpack.dist.config.js

--mode：开发模式   如：--mode production or --mode developement

2. 输出相关的参数

--output-path：输出文件路径

--output-filename：输出文件名按照自己的格式输出

webpack index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js'

| Asset                                | Size    | Chunks      | Chunk Names   |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js |  2.6 kB | 0 [emitted] | index2        |
| index740fdca26e9348bedbec.bundle.js  | 2.59 kB | 1 [emitted] | index         |
    [0] ./src/others.js 29 bytes {0} {1} [built]
    [1] ./src/index.js 51 bytes {1} [built]
    [2] ./src/index2.js 54 bytes {0} [built]

--output-source-map-filename：映射文件名，文件打包后与源文件有一个映射关系，可以通过map找到源文件

webpack.js index=./src/index.js index2=./src/index2.js --output-path='./dist' --output-filename='[name][hash].bundle.js' --devtool source-map --output-source-map-filename='[name]123.map'

| Asset                                | Size    | Chunks      | Chunk Names   |
|--------------------------------------|---------|-------------|---------------|
| index2740fdca26e9348bedbec.bundle.js | 2.76 kB | 0 [emitted] | index2        |
|  index740fdca26e9348bedbec.bundle.js | 2.74 kB | 1 [emitted] | index         |
|                        index2123.map | 2.95 kB | 0 [emitted] | index2        |
|                         index123.map | 2.95 kB | 1 [emitted] | index         |
    [0] ./src/others.js 29 bytes {0} {1} [built]
    [1] ./src/index.js 51 bytes {1} [built]
    [2] ./src/index2.js 54 bytes {0} [built]

3. Debug参数：

--debug:  打开debug模式

--progress: 打印编译的进度

--devtool: 定义source map类型

--display-error-details： 显示错误详情

4. Module 参数

--module-bind： 绑定一个拓展程序 如：--module-bind js=babel-loader

5. watch参数

--watch：监听文件变化

6. Optimize 参数

--optimize-max-chunks：设置代码块最大数量

--optimize-max-chunks 10

--optimize-min-chunk-size：设置代码块最小值

--optimize-min-chunk-size 10000

--optimize-minimize：压缩js文件

7. Stats 参数

--display： 显示打包信息，将具体信息可参考这里

--color, --colors：console里面显示颜色

8. 高级参数

--bail:  如果编译过程一有error，立马停止编译

--hot： 热替换，在config文件中也可配置

--provide：提供一些模块，做全局使用 如：--provide jQuery=jquery

--profile: 提供每一步编译的具体时间

其它参数可参考这里

希望此文章能对大家有帮助！