config-webpack

Node Config Webpack Plugin

Make node-config work with Webpack!

Introduction

Make node-config work with Webpack!

Node-config takes a bunch of config files and makes them available to your application as a plain ol' Javascript object. This doesn't work with Webpack because the config files need to be read on the server.

So what if you need to configure a client application? Or multiple deployments of a client application? What if you need to point your single-page app to localhost when you're developing, but automatically make it point to https://my-production-server.com in prod?

You use config-webpack, that's what you do.

Usage

$ npm install config-webpack

Add the ConfigWebpack plugin to your webpack.config.js.

const ConfigWebpackPlugin = require("config-webpack");

// some Webpack config

plugins: [
    new ConfigWebpackPlugin()
]

Refer to your configs in your bundled Javascript via the CONFIG global.

if (CONFIG.amIAWalrus) {
    console.log(CONFIG.iAmAWalrus);
}

Objects and arrays work transparently.

console.log(CONFIG.walruses[3].name);

config-webpack uses Webpack's DefinePlugin mechanism to perform direct replacement of keys in your JS files with config values. This means that, if your config looks like { "numberOfTusks": 2 }, then every instance of CONFIG.numberOfTusks in your code will be directly replaced with the literal 2.

All of node-config's features, including deployment- and instance-specific files, local files, and environment variables should work with node-config-webpack. node-config-webpack bundles your config on the machine that builds it. That means if you bundle on a development machine and deploy on a production machine, you'll get the development config.

config-webpack is tested with Webpack versions 3.x and 4.x.

Configuring

Specify a custom namespace instead of CONFIG:

// webpack.config.js
new ConfigWebpackPlugin("myConfig")

// app.js
console.log(myConfig.numberOfTusks);

Specify a custom object instead of the one node-config generates.

new ConfigWebpackPlugin("myConfig", { numberOfTusks: 3, colorOfTusks: "yellow" })

Security

node-config-webpack will only inject config values that are used in your application. If a config value isn't referenced anywhere, it won't appear in your bundled sources.

Be careful when referring to any top-level objects, though:

if (CONFIG.debug) {
    console.log(CONFIG);
}

This will expose your entire config object, even if debug is false.

Immutability

Since Webpack performs direct replacement on your code, the config is immutable. Trying to mutate or assign to the config will result in an exception.