為了區分 develop、production 設定，我們將 Webpack 設定檔拆分為 webpack.common.js、webpack.dev.js、webpack.prod.js 三個檔案。
dev 與 prod 主要區別在於開發階段不須處理 Minify / Uglify、Output 的設定不同、Source-map 設定也不同，另外開發階段可以使用 Webpack-dev-server、打包分析工具等等。

我們先安裝 webpack-merge 來結合三個設定檔

npm i webpack-merge -D

webpack.common.js

var CommonConfig = {
  ...common 設定
}
module.exports = CommonConfig 

webpack.dev.js

var Merge = require('webpack-merge')
module.exports = Merge(CommonConfig, {
  ...develop 設定
})

webpack.prod.js

var Merge = require('webpack-merge')
module.exports = Merge(CommonConfig, {
  ...production 設定
})

透過 NPM Scripts 設定打包指令

package.json

scripts: {
  dev: 'webpack --config webpack.dev.js',
  build: 'webpack --config webpack.prod.js'
}

這樣配置即可透過 npm run dev、npm run build 分別啟動 dev、prod 的打包配置。

Github DEMO