Passing Environment Variables Into Your Code With Webpack

Front End Development

In some use cases, it can be beneficial to pass environment variables into your code. In my case, at build time I pass an environment variable to Webpack in the form of --env production and so forth. I wanted to get this in my code so I could load different configuration files depending on the built environment.

I have three environments I build for:

  • Production
  • Staging
  • Development

While there are code solutions you can implement such as checking the URL, I wanted something handled in the build itself.

In my Npm scripts in package.json I have the following:

"scripts": {
  "build": "rimraf dist && webpack --env production",
  "build:dev": "rimraf dist && webpack --env development",
  "build:stage": "rimraf dist && webpack --env staging",
}

Using the DefinePlugin which comes with Webpack, we can then add this to our code at build time like this. I’ve omitted all of the other stuff you would have in your Webpack configuration file so we can focus on the parts that matter.

const { DefinePlugin } = require('webpack');

module.exports = function(env, { analyze }) {
  return {
    plugins: [
      new DefinePlugin({
        'ENV': JSON.stringify(env),
      }),
    ]
  }
}

Now, inside your code ENV is a global variable you can access. I can then perform checks like this:

if (ENV?.development) {
}

If you use TypeScript as I do, then you will want to add a declaration for our magic variable.

declare const ENV: { development?: boolean; production?: boolean; staging?: boolean; };

Now you can pass in values to your code from your Webpack configuration. It’s great for build environment variables or you can even pass through the configuration itself from the build step. I just choose to use if checks and do that myself.