string-replace-webpack-plugin

01.node-object-hash.sort.js

const objectHash = require('node-object-hash');
console.log(objectHash({sort: false}).sort(module.exports));

// Different config content between build 1 and 2
`string-replace-webpack-plugin/loader.js?id=ay3quvgnd7k`
`string-replace-webpack-plugin/loader.js?id=z5o2gtqy17d`

// Build 1 hashed config content

`{context:/Users/zen/Code/webpack/hard-source-string-replace,entry:./index.js,ou
tput:{path:/Users/zen/Code/webpack/hard-source-string-replace/dist,filename:main
.js},module:{rules:[{test:<:RegExp>:/\.js$/,loader:/Users/zen/Code/webpack/hard-
source-string-replace/node_modules/string-replace-webpack-plugin/loader.js?id=ay
3quvgnd7k}]},plugins:[<:HardSourceWebpackPlugin>:[object
Object],<:StringReplacePlugin>:[object Object]]}`

// Build 2 hashed config content

`{context:/Users/zen/Code/webpack/hard-source-string-replace,entry:./index.js,ou
tput:{path:/Users/zen/Code/webpack/hard-source-string-replace/dist,filename:main
.js},module:{rules:[{test:<:RegExp>:/\.js$/,loader:/Users/zen/Code/webpack/hard-
source-string-replace/node_modules/string-replace-webpack-plugin/loader.js?id=z5
o2gtqy17d}]},plugins:[<:HardSourceWebpackPlugin>:[object
Object],<:StringReplacePlugin>:[object Object]]}`

02.hard-source-workaround.js

const createHash = require('crypto').createHash;
const nodeObjectHash = require('node-object-hash');
const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const StringReplacePlugin = require('string-replace-webpack-plugin');

let stringReplacePluginReplaceId = 0;

const secrets = {
  web: {
    key: 'secret'
  },
};

module.exports = {
  context: __dirname,
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: StringReplacePlugin.replace({
          replacements: [
            {
              pattern: /\/\* @secret (\w*?) \*\//ig,
              replacement: function (match, p1, offset, string) {
                return secrets.web[p1];
              }
            }
          ]
        }),
        // StringReplacePlugin doesn't have full webpack >1 support so it won't
        // use these options, but the HardSource configHash can. As long as
        // these options and the above options are kept up to date with each
        // other, the configHash will reflect any changes giving a new cache
        // when you need it.
        options: {
          replacements: [
            {
              pattern: /\/\* @secret (\w*?) \*\//ig,
              replacement: function (match, p1, offset, string) {
                return secrets.web[p1];
              }
            }
          ]
        }
      },
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin({
      configHash(webpackConfig) {
        let hashContent = nodeObjectHash({sort: false}).sort(webpackConfig);
        // Replace StringReplacePlugin ids. The `options` object will also be in
        // the hashContent and correctly reflect the StringReplacePlugin
        // configuration in the configHash.
        hashContent = hashContent.replace(
          /(string-replace-webpack-plugin/loader.js?id=)\w+/,
          match => {
            return match[0] + stringReplacePluginReplaceId++;
          }
        );
        return createHash('sha1').update(hashContent).digest('hex');
      }
    }),
    new StringReplacePlugin(),
  ]
};

03.webpack.config.js

const HardSourceWebpackPlugin = require('hard-source-webpack-plugin');
const StringReplacePlugin = require('string-replace-webpack-plugin');

const secrets = {
  web: {
    key: 'secret'
  },
};

module.exports = {
  context: __dirname,
  entry: './index.js',
  output: {
    path: __dirname + '/dist',
    filename: 'main.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: StringReplacePlugin.replace({
          replacements: [
            {
              pattern: /\/\* @secret (\w*?) \*\//ig,
              replacement: function (match, p1, offset, string) {
                return secrets.web[p1];
              }
            }
          ]
        }),
      },
    ]
  },
  plugins: [
    new HardSourceWebpackPlugin(),
    new StringReplacePlugin(),
  ]
};