Out of the box, webpack doesn’t come with a clear path to environment configuration (please correct me if I’m wrong) If you want to use a different set of configuration variables for your dev and prod environments in a React app you’re pretty much on your own. Thankfully, webpack is very robust, and we can achieve environment configuration with no extra plugins.

When configuring webpack, I prefer to keep separate config files for each environment. While it is possible to make a webpack config conditional, I find it decreases readability. Here’s an example of the development webpack config from my front-end-template repo

webpack.config.js

You’ll notice on line nine we’re using webpacks resolve.alias to create an alias to an environment specific config file. By binding ./src/config/dev.js to config, you can call import config from ‘config’ throughout your application. The same binding exists in webpack.prod.config.js but instead of dev.js it points to ./src/config/prod.js.

Here’s an example from the front-end-template repo of this in action:

./src/config/dev.js

./src/script/components/App.jsx

With this method you don’t have to rely on global variables, you can comment your config files (they’re just javascript) and change the alias location of config for each webpack environment configuration file.