dotenv-webpackは.envファイルに用意された環境変数をクライアントサイドでも利用したい時に便利なライブラリです。

導入

npm install dotenv-webpack --save-dev

webpack.config.jsにpluginとして設定します。

const Dotenv = require('dotenv-webpack');

module.exports = [
  ~~~ゴニョゴニョゴニョ~~~
  {
    plugins: [new Dotenv({
        path: 'path/to/.env',
        safe: false
      })]
  }
  ~~~ゴニョゴニョゴニョ~~~
];

pathは.envファイルへのパス、safeは.env_exampleを読み込むか否かを設定します。

使い方

DOMAIN=hereisyourdomain

config.log(process.env.DOMAIN) // hereisyourdomain

所感

便利だけどセキュリティ的なところは問題ないのだろうか？

参考

• npm - dotenv-webpack
• github - dotEnv