完整的 webpack2 开发环境与生产环境打包配置

webpack 这一打包神器想必大家早已使用了，不过那差劲的官方文档真是搞晕不少入门者。

之前说 webpack 的文档差，现在必须纠正一下。可能是官方也听到一些文档不好看的话语了，所以…，在 webpack 2 的文档上真是下大功夫了。

更值得学习的是，在使用过程中，发现 webpack2 在错误处理上也引入了大量的文档类提示，对程序员真是太贴心了。因为这个，把原来的 webpack1 环境改成 webpack2 时，比想象的要顺利的多，按它的提示走就行。

在这里，分享一套完整的 WEBPACK 2 打包配置，笔者已经在实际项目中使用了一年多，没有什么问题。
希望对大家有所帮助。

直接看项目吧

原来的 webpack1 环境在 webpack1 分支上。

基本打包功能

eslint 校验；
使用 ExtractTextPlugin 将 js 和 css 分离，保证打包文件的整洁，最终会生成 /app.js 和 /app.css两个文件，文件名按自己情况随意改；
默认支持 LESS ，其它的如 SASS 自己可以改；
资源文件压缩合并（废话～）；
小于 8KB 的图片会以 base64 打进 CSS 中，其它按 [name].[ext] 的文件名进行输出；
图片压缩，但非常耗时，默认没有开启!img-loader?minimize；
支持最新的 ES6/7 + reactjs 语法，支持 mobx 注解。
一些打包优化，等等…

开发环境使用 webpack-hot-server。

基础启动命令：

$ webpack-dev-server --config webpack-dev-server.config.js --progress --inline --colors --env.app=demo

其中 --env.app=demo 是自定义环境参数，用于指定打包入口文件。

启动后会在本地启一个 server，将打包的结果：一个 JS 和一个 CSS 发布出去，如：

http://localhost:9080/app.js
http://localhost:9080/app.css

代码实时生效，支持 live-load，比用 webpack --watch 快速的多。

一般基础的功能都包含在内，这里就不多说了，可以自己看代码。

基础启动命令：

$ webpack --config webpack-production.config.js --progress --colors [--watch] --env.app=demo

生产环境中针对公共模块的分离，实现了两种文案，在配置文件中，用大段的 = 注释隔开，两者选其一：

CommonsChunkPlugin，在每次打包中，都会把一些例如：react、react-dom 等公共模块单独打包，实际对每次打包的过程没有什么改善。
DllReferencePlugin，这个方案对公共模块的分离就比较彻底了，在执行这套方案前，先要单独执行一次 dll 的打包：npm run dll，这样，在对业务代码进行打包时，会通过 mainifest 文件排除 dll 的公共模块，这样会大幅的减少打包时间，打出的 app.js 是纯业务代码，当然，页面使用时需要将 react.dll.js、router.dll.js、app.js 依次引入。

推荐使用 DllReferencePlugin 的方案，这对于后期的更新上线、多个项目打包的支持都很有优势。

对于生产环境的打包命令，因为一个构建系统要支持多个项目，入口文件各不相同，每次打包都要在配置文件中修改入口文件实在不方便，而且每次的打包命令还挺长的。因此，写一个简单的 wpbuild.js 脚本，支持要打包项目路径的参数，也省了一堆的 webpack 命令参数。只用调用

node wpbuild.js --(`demo` or `demo/app.jsx`) [--server:启动开发 server] [--watch:生产环境的 watch 模式]

其中指定入口文件是相对 src的路径，参数有两种形式：

eg:

// for product
npm run dll (这个是lib打包，只需要一次)
node wpbuild --demo --watch

// for dev
node wpbuild --demo --server

支持 mobx 的注解。内置一个 demo 例子，可以自己尝试。