webpack配置那些事2：命令行参数

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