dotenv-webpack is a useful library when you want to use environment variables prepared in a .env file on the client side.

Introduction

npm install dotenv-webpack --save-dev

Set it as a plugin in webpack.config.js.

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

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

path sets the path to the .env file, and safe determines whether to load .env_example.

Usage

DOMAIN=hereisyourdomain

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

Thoughts

It's convenient, but is there no security issue?

References

• npm - dotenv-webpack
• github - dotEnv