Process the same module multiple times with separate rules/loaders

Do you want to request a feature or report a bug? Feature

What is the current behavior? If multiple rules match a module, I believe either the loaders are applied serially or only loaders from the first-matched rule processes the file.

What is the expected behavior? I’d like to be able to process the same module multiple times, possibly via separate rules. This doesn’t necessarily need to be asynchronous.

There was a loader that helped with this once, but it no longer appears relevant in webpack 2/3: https://github.com/webpack-contrib/multi-loader; for loaders like ExtractTextPlugin, no file is output.

One implementation of this might be allowing us to configure a rule to only apply for certain entries; e.g.

config = {
  entry: { main: 'index.js', vendor: 'vendor.js' },
  module: { rules: [ { test: (file, entry) => file === 'test.css' && entry === 'main', use: [ ... ] } ] }
} 

Or perhaps we can just specify a rule to apply in “parallel”, for any overlapping rules.

If this is a feature request, what is motivation or use case for changing the behavior? Lots of use cases for this; one might be to process a stylesheet in different ways, and saving them as separate files via ExtractTextPlugin.

[NickCis]

I’ve sorted a way in order to do this, full explanation is on this gist.

tl;dr;

Duplicating imports (as multi-loader does), inlining loader configuration with ident and adding (in a hackish way) loader configuration to the RuleSet’s references dictionary.

[epong]

I believe multi-loader simply takes loaders as strings and adds additional requires to modules.export (and doesn’t support loaders specified as objects). So if you have:

import 'file.scss';

And there’s a rule with multi-loader setup, it would transform this into:

require('!!first-loader!file.scss');
require('!!second-loader!file.scss');

This works for many loaders, but it seems to fail for something like ExtractTextPlugin because, I think, the ExtractTextPlugin instance is lost when having to use something like combine-loaders to feed it into multi-loader. This can and probably should be addressed by multi-loader.

But what I’m requesting here is a bit more general. Essentially:

1. Have webpack support more than 1 matching rule, where each rule processes the module independently
2. Make a rule’s test more powerful by adding some additional information about the module, like the entry from which it’s sourced

This might not be pertinent to vanilla modules, but it’s useful for importing resources/assets. So, a more complete example might be:

config = {
  entry: {
    main: path.resolve('src/index.js'),
    vendor: path.resolve('src/vendor.js')
  }
  module: {
    rules: [
    ...
      { test: (filename, entry) => filename.match(/\.png$/) !== null && entry == 'main',
        loader: 'file-loader', ... },
      { test: (filename, entry) => filename.match(/\.png$/) !== null && entry == 'vendor',
        loader: 'url-loader', ... },
    ...
      { test: /\/.png$/,
        loader: 'file-loader', { outputPath: 'cdn' } },
    ]
  }
}

In this case, png includes from index.js are copied out as files, whereas those in vendor.js are inlined. This example also shows the same module matching multiple rules, such that png imports will also always create an additional file in ./cdn. And either the first matching rule would provide what’s returned on the original import or an order/preference could be specified by the rule itself.