区别

开发模式和生产模式的sourceMap、热启动、服务、插件等配置有所区别，所以分开两个文件分别配置。
因为有一些公共的配置，所以将这部分配置提取出来，单独放在一个文件中，然后将这个文件的配置与两中模式的配置合并。

区分

通过process.env.NODE_ENV来区分，其值通常为“production”（生产环境）和“development”（开发环境）

if(process.env.NODE_ENV === 'development'){ 
    //开发环境 do something
}else{
    //生产环境 do something
}

代码

package.json
不同的命令执行不同的配置文件

"script": {
  "dev": "webpack-dev-server --config ./build/webpack.dev.js"
  "build": "webpack --config ./build/webpack.prod.js"
}

合并配置

npm install webpack-merge -D

webpack.dev.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const devConfig = {
  // ...
}
module.exports = merge(commonConfig, devConfig);

webpack.prod.js

const merge = require('webpack-merge');
const commonConfig = require('./webpack.common.js');
const prodConfig = {
  // ...
}
module.exports = merge(commonConfig, prodConfig);

网站导航

网站导航