EnvironmentPlugin で環境変数をコード内に渡す

関連

NodeJSでは、環境変数はprocess.envというオブジェクトの中に入っていますが、この習慣をクライアント側でも使おうということでprocess.env.xxxを定義して使えるようにするのが EnvironmentPlugin の役割です。この EnvironmentPluginはwebpackパッケージに一緒に入っています。

const webpack = require('webpack');

module.exports = {
  /* 色々 */
  plugins: [
    new webpack.EnvironmentPlugin({
      NODE_ENV: 'development'
    })
  ],
}

環境変数を渡すか渡さないかで切り替える

これは例えば、

yarn webpack

でビルドすればコード内のprocess.env.NODE_ENV === 'developmentになります。そして今度は、

NODE_ENV=production yarn webpack

のように環境変数を渡してビルドすればprocess.env.NODE_ENV === 'productionになるという感じです。このようにprocess.env.NODE_ENVの値を環境変数を渡すか渡さないかで切り替えることに成功したので、あとはコードの中で条件分岐などで処理を分けるだけですね。

他にどんなものを定義したらいいか

例えばこのサイトで使っている Contentful という CMS は本番用と開発用でトークンが違うのでこういう別れてるものがメインで使えると思います。他には Stripe などのトークンも別れていますね。