[JavaScript]Set environment variables in Webpack and dotenv

It is a module of NODE.JS called dotenv that allows you to set the variables that you want to change depending on the environment, such as dev/stg/prod.
Install and use the .env file.

How to use dotenv-webpack

If you want to use it with webpack, install and use the following modules.
npm dotenv-webpack


npm install dotenv-webpack --save-dev


Create .env file

The created .env is placed in the same hierarchy as webpack.config.js.
It is also possible to specify the path of the file when setting dotenv.

// .env


Set to config file

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


Call the variable you set

It can be called as follows in js bundled with webpack.



When using the variable set in dotenv in webpack.config.js

Because dotenv-webpack is set as a plug-in at the time of bundling, you cannot access the variables you set in webpack.config.js.
To use it in webpack.config.js, call dotenv as follows:


Dotenv-webpack wraps dotenv, so you can use it without installing dotenv again.
Also, if you want to use it only in webpack.config.js, you may install only dotenv, not dotenv-webpack.

Sites that explain dotenvnpm dotenv

Because there are a lot of cases where secure information is included, it is removed from git management.

The .env file should be described in .gitignore.