[JavaScript]Webpackとdotenvで環境変数を設定する

dev/stg/prod など環境によって変更したい変数を設定できるようにするのがdotenvというNODE.JSのモジュールです。
.envファイルを設置して使用します。

dotenv-webpackの使い方

webpackで使用する場合は下記モジュールをインストールして使用します。
npm dotenv-webpack

インストール

npm install dotenv-webpack --save-dev

 

.envファイル作成

作成した.envはwebpack.config.jsと同じ階層に配置します。
dotenvの設定時にファイルのpathを指定することも可能です。

// .env
DB_HOST=127.0.0.1
DB_PASS=foobar
S3_API=mysecretkey

 

コンフィグファイルに設定する

// webpack.config.js
const Dotenv = require('dotenv-webpack');
 
module.exports = {
  ...
  plugins: [
    new Dotenv()
  ]
  ...
};

 

設定した変数の呼び出し

webpackでバンドルされるjs内で下記のように呼び出すことができます。

console.log(process.env.DB_HOST);

 

webpack.config.js内でdotenvで設定した変数を使う場合

dotenv-webpackはバンドル時のプラグインとして設定しているため、webpack.config.js内では設定した変数にアクセスできません。
webpack.config.js内で使用するには、下記のようにdotenvを呼び出します。

require('dotenv').config();

 
dotenv-webpackはdotenvをラップしているので、改めてdotenvをインストールしなくても使用できます。
また、webpack.config.js内だけで使用するのであれば、dotenv-webpackでなく、dotenvのみインストールでもよいです。

dotenvについて解説しているサイト
環境変数の代わりに .env ファイルを使用する (dotenv)

セキュアな情報が含まれるケースが多いのでgit管理から外す

.envファイルは.gitignoreに記載しておきましょう。