很多小伙伴在每次用到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: 提供每一步编译的具体时间
其它参数可参考这里
希望此文章能对大家有帮助!