iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
0
Modern Web

Webpack with ASP.NET MVC系列 第 6

Webpack 設定檔配置 Common / Dev / Prod

為了區分 develop、production 設定,我們將 Webpack 設定檔拆分為 webpack.common.jswebpack.dev.jswebpack.prod.js 三個檔案。
devprod 主要區別在於開發階段不須處理 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 devnpm run build 分別啟動 devprod 的打包配置。

Github DEMO


上一篇
將 Module 暴露到全域
下一篇
Babel 設定
系列文
Webpack with ASP.NET MVC30

尚未有邦友留言

立即登入留言