webpack-dev-serverを使って環境変数NODE_ENVを上書きする方法

https://qiita.com/akirakudo/items/77c3cd49e2bf39da79dd
こちらを参考にさせていただきました。
ありがとうございます。

ローカル環境ではwebpack-dev-serverを使用しています。
環境変数使うためにcross-envをインストールしています。
https://www.npmjs.com/package/cross-env

実行コマンド

npm cross-env NODE_ENV=local webpack-dev-server

webpack.config.js

console.log(process.env.NODE_ENV);

結果は
NODE_ENV=development
となってしまう。

解決策

webpack.config.jsに
DefinePluginを用いてNODE_ENVを上書きする
https://webpack.js.org/plugins/define-plugin/

webpack.config.js

  plugins: [
      // webpack-dev-serverを使うとNODE_ENVがdevelopmentになってしまうため、
      // NODE_ENVを指定した値で上書きする
      new webpack.DefinePlugin({
          'process.env': {
              'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
          }
      }),
  ],

こうすると
NODE_ENV=localで出力されるようになった
‌