Webpackでmodule bundle時の環境変数

以前に自分でJSの環境変数の扱いについてのblogを書いたのですが、Webpackで環境変数を使用する際はこちらのライブラリの方が良いと思い試しみた hinoshita.hatenadiary.com

webpack-dotenv

webpackでjs等をbundleする際に、API KeyやHOST名など環境や開発時と公開時で値が変わる値の管理を容易にするライブラリ

github.com

環境準備

  • webpack、dotenv-webpackをインストール

npmの場合

npm install -D webpack webpack-cli dotenv-webpack

yarnの場合

yarn add -D webpack webpack-cli dotenv-webpack

dotenv-webpackの利用

  • .env ファイルの用意
HOST=127.0.0.1
  • webpack.config.js の設定 dotenv-webpackをrequireし、pluginsインスタンス化する
const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  entry: path.resolve(`${__dirname}/src`, 'index.js'),
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  },
  mode: 'development',
  plugins: [
    new Dotenv()
  ]
};
  • 実装時の参照例 process.env. の後に .envで指定したkeyで指定する
console.log(process.env.HOST);
  • webpackでbundle後
console.log("127.0.0.1");

process.env.HOST.env で指定した値になって出力される

今回のサンプルプログラム

github.com