关于对开发环境和生产环境做不同的webpack配置。
git仓库:webpack-demo
webpack.config.js
仅仅这一个配置文件已经不能满足我们的需求了,因为开发环境和生产环境配置的内容是不一样的,有这么些异同:
mode
模式,生产环境需配置为developmet
,开发则设置为production
;devtool
的souremap
;devServer
,开发环境需要配置跨域代理转发,而生产环境不需要;HRM
,生产环境不需要这个,只要开发环境需要,而且这个容易与代码分割产生冲突,如果你生产环境及设置了代码分割又设置了HRM就会失效。webpack
配置文件。chapter15
目录下新建一个build
的文件夹,里面新增几个针对不同环境的配置文件。webpack-demo/chapter15 + |- /build + |- webpack.common.js + |- webpack.dev.js + |- webpack.prod.js |- src |- index.html |- package.json - |- webpack.config.js ...
webpack.config.js
文件了。
webpack.common.js
就是一些生产和开发环境中都要用的配置。webpack.dev.js
就是只需在开发时生效的配置。webpack.prod.js
同理。common
部分我们还是需要合并的,首先我们要安装一个webpack-merge
插件,这个插件可以帮我们做这个事情。$ npm install webpack-merge --save-dev
webpack.dev.js
中要把common
合并进来:const merge = require("webpack-merge"); const commonConfig = require("./webpack.common.js"); const devConfig = { // development环境下的一些webpack配置 } module.exports = merge(commonConfig, devConfig);
webpack.prod.js
也是这样操作的,就不多说了,然后我们需要去package.json
中修改下scripts
脚本。{ "name": "webpack-easy-demo", "version": "1.0.0", "description": "webpack从0到1", "main": "index.js", "scripts": { "watch": "webpack --watch", - "build": "webpack", - "start": "webpack-dev-server", + "dev": "webpack-dev-server --config ./build/webpack.dev.js", + "build": "webpack --config ./build/webpack.prod.js" }, // ... }
$ npm run dev $ npm run build