Posted at

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

More than 1 year has passed since last update.

webpackでは本番環境用・開発環境用で処理を分けたい場合、環境変数のprocess.env.NODE_ENVを用いる。

さらにDefinePlugin 1を使うと、モジュール内にこの環境変数を渡せるようになる。


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でも可能。