EnvironmentPlugin

TheEnvironmentPlugin is shorthand for using theDefinePlugin onprocess.env keys.

Usage

TheEnvironmentPlugin accepts either an array of keys or an object mapping its keys to their default values.

newwebpack.EnvironmentPlugin(['NODE_ENV','DEBUG']);

This is equivalent to the followingDefinePlugin application:

newwebpack.DefinePlugin({'process.env.NODE_ENV':JSON.stringify(process.env.NODE_ENV),'process.env.DEBUG':JSON.stringify(process.env.DEBUG),});

warning

EnvironmentPlugin checksprocess.env for the specified variable. If it’s missing, it searches for a default value provided in the configuration. If neither the environment variable nor the default value is defined, an error will be thrown:"EnvironmentPlugin -${key} environment variable isundefined".

Usage with default values

Alternatively, theEnvironmentPlugin supports an object, which maps keys to their default values. The default value for a key is taken if the key is undefined inprocess.env.

newwebpack.EnvironmentPlugin({NODE_ENV:'development',// use 'development' unless process.env.NODE_ENV is definedDEBUG:false,});

warning

Variables coming fromprocess.env are always strings.

tip

Unlike DefinePlugin, default values are applied toJSON.stringify by theEnvironmentPlugin.

tip

Default values ofnull andundefined behave differently. Useundefined for variables thatmust be provided during bundling, ornull if they are optional.

Example:

Let's investigate the result when running the previousEnvironmentPlugin configuration on a test fileentry.js:

if(process.env.NODE_ENV==='production'){  console.log('Welcome to production');}if(process.env.DEBUG){  console.log('Debugging output');}

When executingNODE_ENV=production webpack in the terminal to build,entry.js becomes this:

if('production'==='production'){// <-- 'production' from NODE_ENV is taken  console.log('Welcome to production');}if(false){// <-- default value is taken  console.log('Debugging output');}

RunningDEBUG=false webpack yields:

if('development'==='production'){// <-- default value is taken  console.log('Welcome to production');}if('false'){// <-- 'false' from DEBUG is taken  console.log('Debugging output');}

Use Case: Git Version

The followingEnvironmentPlugin configuration providesprocess.env.GIT_VERSION (such as "v5.4.0-2-g25139f57f") andprocess.env.GIT_AUTHOR_DATE (such as "2020-11-04T12:25:16+01:00") corresponding to the last Git commit of the repository:

const child_process=require('child_process');functiongit(command){return child_process.execSync(`git${command}`,{ encoding:'utf8'}).trim();}newwebpack.EnvironmentPlugin({GIT_VERSION:git('describe --always'),GIT_AUTHOR_DATE:git('log -1 --format=%aI'),});

DotenvPlugin

The third-partyDotenvPlugin (dotenv-webpack) allows you to expose (a subset of)dotenv variables:

// .envDB_HOST=127.0.0.1DB_PASS=foobarS3_API=mysecretkey

newDotenv({  path:'./.env',// Path to .env file (this is the default)  safe:true,// load .env.example (defaults to "false" which does not use dotenv-safe)});