RegExp string-replacer for Webpack

Quoting the doc on Asynchronous Loaders:

Loaders were originally designed to work in synchronous loader pipelines, like Node.js (using enhanced-require), and asynchronous pipelines, like in Webpack. However, since expensive synchronous computations are a bad idea in a single-threaded environment like Node.js, we advise making your loader asynchronous if possible. Synchronous loaders are ok if the amount of computation is trivial.

Install

$ npm i -D yst138451/async-string-replacer

Usage

In webpack.config.js add it up right before the last loader in the chain (e.g. babel-loader):

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: [
        'babel-loader',
        {
          loader: 'async-string-replacer',
          options: {
            configFile: path.resolve(__dirname, './src/your.config.js')
          }
        }
      ]
    },
    //...
  ]
}

Where your.config.js is your dedicated config file containing all the RegExp rules for the string replacements. For example the following pattern allows you to md5 hash all Vue.js Custom Event names (for whatever reason that is):

module.exports = [
  {
    pattern: /(?<=\$(emit|on|once|off)\(')\S+(?=')/ig,
    replacement: require('md5')
  },
  
  // More rules here
]

Raw	Hashed
`vm.$emit('routes:changed');`	`vm.$emit('fe288a6cad4b10b92fdff65256df6713');`

Once configured and run, all files ending in .js (including .vue files, since they ultimately compile down to .js) will be processed by the loader, seaching up for these custom event names to hash.

⚠ This is not meant for JS obfuscation of some sort, in which case you should instead use Javascript obfuscator or UglifyJS Webpack Plugin.