Prepending oneOf rules

[StaverDmitry]

Hello! I'm working with a vue project. It has a default set of loaders for various file types.
For scss it uses oneOf ruleset with resourceQuery's, the last of them is what I believe a default rule with no resourceQuery (correct me if I'm wrong here).

My task required to extract raw css as a string and the issue here is that the final default loader in vue is vue-style-loader which does not allow this. I decided to use css-loader for this.

So the question is: am I able to put my own oneOf rule before the default one without having to rewrite defaults?

I'm aware I can override loaders in import statement, but I may require to do this in other parts of the project so I thought it would be the best solution.

[edmorley]

Hi! Sorry for the delayed reply.

Several of the webpack-chain classes are made Orderable (for example plugins) - it seems that perhaps Rule should be too?

Doing that would allow for using .before() and .after() annotations on the .oneOf() entries, which would allow overriding the order.

Would you be up for opening a PR? :-)

If so, I'd wrap Rule with Orderable here:

webpack-chain/src/Rule.js

Line 5 in a60fc9f

module.exports = class Rule extends ChainedMap {

And add some tests here:
https://github.com/neutrinojs/webpack-chain/blob/master/test/Rule.js

It would also be good to update the readme with examples of using the new feature.

[lxsedov]

This feature would be super useful.

[timkelty]

I think this feature would help with this as well: neutrinojs/neutrino#1243

[FichteFoll]

Also ran into this. My workaround is as follows:

1. Delete 'normal' oneOf rule
2. Insert my custom rule
3. Insert old 'normal' rule

Code:

    const normalRule = config.module.rule('css').oneOfs.store.get('normal')
    config.module.rule('css').oneOfs.store.delete('normal')
    config.module.rule('css')
      .oneOf('useable')
        .test(/\.useable\.css$/)
        .use('style-loader/useable')
          .loader('style-loader/useable')
          .options({ sourceMap: false,
                     shadowMode: false })
          .end()
        .use('css-loader')
          .loader('css-loader')
          .options({ sourceMap: false,
                     importLoaders: 2 })
          .end()
        .use('postcss-loader')
          .loader('postcss-loader')
          .options({ sourceMap: false })
          .end()
    config.module.rule('css').oneOfs.store.set('normal', normalRule)

[timkelty]

👏 thanks!