webpack

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