やりたいこと

webpackを使ってフロント用のファイルをバンドルしたい。

そのとき、環境変数に合わせて値を変えたいという場面があった。

ノリ的には以下のようなコード。

if (process.env.NODE_ENV === 'development') {
  console.log('Debug message');
}

この例だと開発か本番かの判定だが、他にもステージングの時はこのAPIのエンドポイント、といったことがしたかった。

ハマった

webpack初心者だったのでこの記事を参考に書いてみた。

細かいところは違うけどほぼ内容一緒なのでコードは割愛。

そしてコンパイルされたコードを見るために以下のように適当にコード書いて動かしてみる。

console.log(process.env.NODE_ENV);

そしてビルドし、吐き出されたコードを見てみる。

npm run buildはpackage.jsonに"build": "webpack"とだけ定義してある。

npm run build
node dist/index.js
> undefined

なんで！！！！！！

原因はなんてことなくて、これを併用していたせいだった。

こいつはBabelでコンパイルする際、環境変数を静的に置き換えてくれる。

WebpackでBundleするとき、内部的な処理順は

という順序になっている。

私はDefinePluginとtransform-inline-environment-variablesを併用、かつビルド実行時に環境変数をexportしていなかったので

transform-inline-environment-variablesがprocess.env.HOGEを静的に置き換え(exportされてないのでundefined)
DefinePluginが実行(でもprocess.env.HOGEは全部置換済みなので何も起きない)

という感じになっていた。

なのでやり方的には

の2通り。どっちがいいかは好みや場合によりけりかな…

圧縮の道はツライ。