npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

config-webpack

v1.0.5

Published

Plugin that makes node-config work with Webpack

Downloads

17,024

Readme

Node Config Webpack Plugin

Make node-config work with Webpack!

Build Status

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.