Custom loaders for webpack

Perhaps there is a transformation you'd like to perform on your javascript files that is unique to your project. Perphaps replacing the word dumb with smart is a requirement but you don't have control over the actual files and can't make that change to the source files themseles.

In this situation, you can use a custom loader.

module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: './smart-loader',
      }
    ]
  },
}

The loader itself (smart-loader.js) would look something like this.

module.exports = function(source) {
  return source.replace('dumb', 'smart');
}