关于对开发环境和生产环境做不同的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