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

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は１つだけで環境変数で処理を分岐する。
設定の差分が大きい場合はconfigをmergeする方法を使うのがスッキリしそうだが、今回は大して差分はないので１つのconfigで済むようにした。

実装

package.json

• webpack:devで開発用のwebpack-dev-serverを起動
• webpack:prodで本番用のbundle.jsをビルド
• webpack:prodには引数で-pを渡してuglifyする
• webpack:prodにはNODE_ENV=productionで環境変数を渡す
  
  • -pを渡してもビルドスクリプト内ではNODE_ENVは設定されない（Node Environment Variable の青い部分に記載）
  • お好みでcross-envを使っても良い

{
    "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';
}

動作確認用コード