Webpackでmodule bundle時の環境変数
以前に自分でJSの環境変数の扱いについてのblogを書いたのですが、Webpackで環境変数を使用する際はこちらのライブラリの方が良いと思い試しみた hinoshita.hatenadiary.com
webpack-dotenv
webpackでjs等をbundleする際に、API KeyやHOST名など環境や開発時と公開時で値が変わる値の管理を容易にするライブラリ
環境準備
- 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
で指定した値になって出力される