A complete webpack2 build environment.
一套完整的 webpack2 的构建系统搭建。
- 分开发环境和生产环境
开发环境使用 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
**的路径,参数有两种形式:
- 可以只写文件夹名称,如
--demo
,此时会默认选择demo/app.jsx
为入口文件 - 完整的入口文件路径,如
--demo/xxx/app.jsx
eg:
// for product
npm run dll (这个是lib打包,只需要一次)
node wpbuild --demo --watch
// for dev
node wpbuild --demo --server
支持 mobx 的注解。内置一个 demo 例子,可以自己尝试。