npm 命令执行webpack时的各个参数设置
经常看别人讲解怎么使用webpack，大都从webpack.config.js设置入手，如entry和output要怎么设置，什么时候用什么插件这样的讲解。
最近在看webpack源码，发现这个参数也可做篇文章。
webpack --config webpack.config.js --progress --env.env uat--env.production production
以上是大家常用的设置了。其中config，progress， env都是传给webpack命令文件的参数
参看bin/webpack.js 代码可以看出，简单可以分为2部分：第一步用yargs进行需要的参数格式设置，第二步解析参数后完成各个功能。
补充： yargs是nodejs环境下的命令行参数解析工具
举个例子，如果参数传了progress， 则webpack会加载自带插件ProgressPlugin显示进度条，如果此外你还传了profile值，ProgressPlugin还会显示编译或打包时间
progress
profile
再具体的详细代码就不说了。
具体有哪些参数的话，大家可以看看自己项目下的node_modules/webpack/bin/config-yargs.js 文件，里面列了所有可传参数，如下图：
所有配置参数
这些参数还是分组的：
如参数config，config-name, env 都同属于CONFIG_GROUP；
module-bind, module-bind-post, module-bind-pre 这些是属于MODULE-GROUP的（把Loader绑定到扩展名，如webpack --module-bind jade --module-bind'css=style!css'相当于webpack.config.js 里面module.rules的loader设置）,
OUTPUT_GROUP 相当于webpack.config.js里面的output设置如何输出文件，可以设置output-path, output-filename等；
RESOLVE_GROUP相当于webpack.config.js里面的resolve设置模块如何被解析，可以设置resolve-alias, resolve-extensions等；
OPTIMIZE_GROUP 则是加载相应插件； （详见https://github.com/webpack/docs/wiki/optimization）
--optimize-minimize resp. new webpack.optimize.UglifyJsPlugin()
Limit the maximum chunk count with --optimize-max-chunks 15 new webpack.optimize.LimitChunkCountPlugin({maxChunks: 15})
Limit the minimum chunk size with --optimize-min-chunk-size 10000 new webpack.optimize.MinChunkSizePlugin({minChunkSize: 10000})
OPTIMIZE_GROUP
ADCANCED_GROUP有点多，常用的hot, devtool, debug 都在这里；
ADCANCED_GROUP
所以，假如我只是想临时打包一个文件，就不需要webpack.config.js文件了。
给个例子：
webpack --output-filename out.js --module.bind 'css=style!css', --module.bind 'js=babel' --p --progress
网友评论