webpack-define-envs-plugin

Embed environment variables as global constants for local js files.

how it works

webpack-define-envs-plugin will read from process.env and define specific environment variables as global constants.

read more about process.env

arguments

• keys - array of keys to read from process.env.
• scope - scope of the global constants. Default to "process.env" if not set.

how to use

// webpack.config.js

const DefineEnvsPlugin = require("webpack-define-envs-plugin");

module.exports = {
    plugins: [
        new DefineEnvsPlugin(["USER", "API_BASE_URL"], "GLOBAL")
    ]
};


// your .js file

const appEnv = GLOBAL.USER;
const apiUrl = GLOBAL.API_BASE_URL;

avoid using process.env scope

It's not recommended to use process.env scope since it's not the same process.env that Node uses.

Local js files don't know about process.env, so the environment variables have to be processed and embedded by webpack during the build time. On the other hand, in a Node application, process.env is a Node module and is injected at runtime.