Environment Variables : Webpack config using DefinePlugin

How To Configure Environment Config Using Webpack’s DefinePlugin

What is Environment Variable ?

“Environment variables are a set of dynamic named values that can affect the way running processes will behave on a computer.”

In simple terms, Environment Variables are variables that are set depending on the computer (server) the software is running on.Environment Variables helps to configure sensitive information for different environment

Webpack Config with Environment variables

There are many ways to add environment variables in webpack that can be useful in various ways and depending upon your use case .Some of them are as follows:

1. Using .env File
2. Specify environment variables in webpack configuration file
3. importing variables from js file containing various constants

Import Environment variables from .env

‘.env’ File is basically a file which contains all your environment dependent settings like which environment, which server , host name , database details . ‘.env’ files are the files which contains sensitive information like AWS credentials , Database passwords, third-party integration access tokens that can cause harm if it is leaked. So it is recommended to put this file on gitignore and add dummy sample file .

Webpack by default does not provide any process to load ‘.env’ files. but there many plugins and libraries that can do the same task.

Some of them are as below:

1. dotenv (NPM Package)
2. DefinePlugin (Webpack Plugin )
3. EnvironmentPlugin (Webpack plugin)
4. DotEnv Plugin ( Webpack plugin )

Here in this article our focus is only on Webpack Plugins

DefinePlugin

As per webpack definition

“The DefinePlugin allows you to create global constants which can be configured at compile time.”

We can use Define plugin in webpack.config file under plugins key

new webpack.DefinePlugin({
  // Definitions...
});

Usage:

• If the value is a string it will be used as a code fragment.
• If the value isn’t a string, it will be stringified (including functions).
• If the value is an object all keys are defined the same way.
• If you prefix typeof to the key, it's only defined for typeof calls.

let’s have an example

Add this snippet to your plugins array in config file

new webpack.DefinePlugin({
  PRODUCTION: JSON.stringify(true),
  VERSION: JSON.stringify('5fa3b9'), 
  BROWSER_SUPPORTS_HTML5: true,
  TWO: '1+1',
  'typeof window': JSON.stringify('object'),
  'process.env': {
    NODE_ENV: JSON.stringify(process.env.NODE_ENV)
  }
});

Note that because the plugin does a direct text replacement, the value given to it must include actual quotes inside of the string itself. Typically, this is done either with alternate quotes, such as '"production"', or by using JSON.stringify('production').

We can use this defined constants as follow:

if (!PRODUCTION) {
  console.log('Debug info');
}

if (PRODUCTION) {
  console.log('Production log');
}

Here is example of my code files

Now, within my components anywhere that I reference ENVIRONMENT VARIABLES will be updated to the value created using DefinePlugin.

NOTE: This will not create a global variable, so throwing in a debugger and trying to inspect the value of ENVIRONMENT VARIABLE won’t work.Webpack overwrites the reference using the supplied value as to avoid polluting the global scope.

If you have any suggestions or any feedback so far, then please feel free to mention that in the comments, that help me writing better content.

This article is a part of a series on Environment Variables:
1. What are Environment Variables?
2. Environment variables in Create React App
3.Environment Variables : Webpack config using DefinePlugin