Windowsでwebpack-dev-serverに環境変数を渡す方法

最近はJavascriptを少し触っている。

課題1

開発環境と本番環境でJavascriptのコードを切り替えたい。

解決方法1

もとからprocess.env.NODE_ENVには設定に応じて値が埋まっている。

if (process.env.NODE_ENV === 'production') {
 // 本番環境
}

if(process.env.NODE_ENV === 'development')){
 //開発環境
}

課題2

開発環境内で更にコードを切り替えたい場合が出てきた。 process.env.NODE_ENV はdevとprdしか自動では定義していないように見える。

解決方法2-1

調べていてよく見るのは、package.jsonのnpm scripts部分で、

$ ENV=hoge webpack

のように、環境変数を付与する方法だが、これはWindows(というよりコマンドプロンプト)では動かない。

SET ENV=hoge&& webpack

とするといいぞ、という記事も見たが、webpack-dev-serverでは

process.env.ENV

はundefinedになっていた。

解決方法2-2

そこで、webpack cliのオプションを見てみると、

webpack.js.org

--define : Define any free variable

というオプションを見つけた。

これで、例えば

$webpack-dev-server --define HOGE=true

とすれば、 Javascript側でHOGEがtrueとして定義されるので、

if(HOGE)){
  console.log('HOGEが定義されてるよ')
}

とすることで、指定した環境向けだけ特定コードを通るように環境変数で切り替えができた。

さらに、上記のコードで

$webpack-dev-server --define HOGE=false

のようにfalseを指定した場合には、webpackのminifyが効いてデッドコード（通ることがありえないコード）はbundleせずに消してくれているようだった。便利。