managing secret configs with webpack

.gitignore

# no need to ignore entire "config" directory
secrets.json

index.js

// this file: config/index.js
// secrets:   config/secrets.json

// The values in this object will be the default config values, 
// and will be overriden with the values (of the same keys) 
// defined in the secrets.json file.
const config = {
    host: 'http://localhost:3000/'
};

try {
    // This tries to load the secret configs. In the event that the
    // file is missing, we will just get an empty object.
    const secrets = require('./secrets.json');
    
    // Override default config with values from the secrets file.
    Object.assign(config, secrets);
} catch (e) {}

module.exports = config;

secrets.json

{
  "host": "https://example.com"
}

webpack.config.js

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');

module.exports = {
    // ...other webpack configs
    
    externals: (context, request, callback) => {
        // Let's say our sensitive configs are stored in the file 'config/secrets.json'.
        // That file is ignored and not committed into the repo. 
        
        if (request === './secrets.json') {
            fs.stat(path.join(context, request), (err, stat) => {
                // We check if that file secrets file exists in the filesystem. If not, 
                // we "mock" it out with an empty object.
                if (err) {
                    return callback(null, '{}');
                }
                callback();
            });
        } else {
            callback();
        }
    }
};