webpackで環境変数をモジュールに渡す

webpackでは本番環境用・開発環境用で処理を分けたい場合、環境変数のprocess.env.NODE_ENVを用いる。
さらにDefinePlugin ¹を使うと、モジュール内にこの環境変数を渡せるようになる。

webpack.config.js

var webpack = require('webpack');

module.exports = {
  entry: {
    ...
  },
  output: {
    ...
  },
  plugins : [
    new webpack.DefinePlugin({
      NODE_ENV: JSON.stringify(process.env.NODE_ENV),
    })
  ],
};

webpackを実行する際に、NODE_ENVにパラメータを渡してやる。

NODE_ENV=development webpack

こうするとモジュール内に環境変数のNODE_ENVを渡せるので、開発環境のみ実行されるといった処理を記述できる。

if(NODE_ENV === 'development') {
  console.log('development');
}

本番環境用となるNODE_ENV=productionの場合には、ビルド時のwebpackによる静的解析により、上記の式はif(false) { ... }と解釈される。
これにUglifyJsPluginを用いるとif(false) { ... }のような必ず実行されない式の部分は省かれるので、本番環境用ビルドには上記の処理が排除されたものが出力される。

1. 環境変数を渡すだけならEnvironmentPluginでも可能。 ↩