Edited at

webpackの設定をdevとproductionで分ける一例

More than 1 year has passed since last update.

webpackの設定を開発用と本番用で分けたいことがある。

例えば、SourceMapの有無とか種類を分けたい時や、uglifyするかしないかを切り替えたりなどが考えられる。

基本的には、webpackのproductionのドキュメントを見ればやり方は書いてあるが、やり方が幾つかあるので、自分のメモがてらその一例をここに書く。


webpackのバージョン


  • webpack: 3.4.1

  • webpack-dev-server: 2.6.1


要件


開発用


  • webpack-dev-serverでserveする

  • SourceMapを付ける

  • uglifyしない


本番用


  • bundle.jsをビルドする

  • SourceMapを付けない

  • uglifyする

webpackとしてはproductionでSourceMap使うと便利だよと言っているが、まぁそれはそれとして、こういう要件だったとする。


方針

webpack.config.jsは1つだけで環境変数で処理を分岐する。

設定の差分が大きい場合はconfigをmergeする方法を使うのがスッキリしそうだが、今回は大して差分はないので1つのconfigで済むようにした。


実装


package.json

{

"name": "webpack-dev-prod",
"version": "1.0.0",
"scripts": {
"webpack:dev": "webpack-dev-server",
"webpack:prod": "NODE_ENV=production webpack -p"
},
"devDependencies": {
"webpack": "^3.4.1",
"webpack-dev-server": "^2.6.1"
}
}


webpack.config.js


  • NODE_ENVで処理を分岐してSourceMapを設定する

const path = require("path");

module.exports = {
entry: {
index: ["./src/test.js"]
},
output: {
path: path.resolve(__dirname, "build"),
filename: "bundle.js"
}
};

if (process.env.NODE_ENV !== 'production') {
module.exports.devtool = 'inline-source-map';
}


動作確認用コード

https://github.com/mwatanabe/webpack-dev-prod