BIOGRAPHYREADME2016.11.01webpackのDefinePluginとbabel-plugin-transform-environment-variablesの併用には注意このブログははてなブログからの移行記事です。やりたいことwebpackを使ってフロント用のファイルをバンドルしたい。そのとき、環境変数に合わせて値を変えたいという場面があった。ノリ的には以下のようなコード。message');}この例だと開発か本番かの判定だが、他にもステージングの時はこのAPIのエンドポイント、といったことがしたかった。ハマったwebpack初心者だったのでこの記事を参考に書いてみた。細かいところは違うけどほぼ内容一緒なのでコードは割愛。geta6.hatenablog.comそしてコンパイルされたコードを見るために以下のように適当にコード書いて動かしてみる。console.log(process.env.NODE_ENV);そしてビルドし、吐き出されたコードを見てみる。"webpack"とだけ定義してある。原因はなんてことなくて、これを併用していたせいだった。babeljs.ioこいつはBabelでコンパイルする際、環境変数を静的に置き換えてくれる。WebpackでBundleするとき、内部的な処理順はbabel-loaderでソースをコンパイルpluginsを通すという順序になっている。私はDefinePluginとtransform-inline-environment-variablesを併用、かつビルド実行時に環境変数をexportしていなかったのでtransform-inline-environment-variablesがprocess.env.HOGEを静的に置き換え(exportされてないのでundefined)DefinePluginが実行(でもprocess.env.HOGEは全部置換済みなので何も起きない)という感じになっていた。transform-inline-environment-variablestransform-inline-environment-variablesは使わずDefinePluginにすべてkey-valueで渡すの2通り。どっちがいいかは好みや場合によりけりかな...まとめ圧縮の道はツライ。