Wouter De Loose

Configuration control with Webpack

Most developers who use node are aware of node-config, it allows you to define different configurations for different environments. That means you could have a development.json and a production.json configuration, node-config will pick the correct configration based on the environment.

A typical setup would look like this:

|   ├──default.json           * Default parameters
|   ├──development.json       * Development parameters
|   ├──staging.json           * Staging parameters
|   ├──production.json        * Production parameters

Flexible front-end configurations

While working on a front-end app, you often want to have different configurations as well, your api endpoint will usually be different during development, staging and production. There might be some other parameters that are changed during your production builds.

Webpack has a configuration option called resolve.alias, this allows you to replace modules with other modules or paths. With that in mind, we can simply do:

module.exports = {
	resolve: {
		alias: {
			// For development
			'config': path.resolve(__dirname, 'config', 'development.js')
			// For production
			'config': path.resolve(__dirname, 'config', 'production.js')

In any JavaScript file, we can get our config as follows:

import config from 'config';

This article was written to the best of my abilities, if you spot any mistakes or have suggestions for improvements, you can open an issue on Github, leave a comment below, or send me an email.