How to prepend rule loaders?

[paul-sachs]

Loaders on rules are order dependent, yet, looking at the source code for webpack-chain, it's being treated as a map (rule.uses). How would you inject a loader at the head of the loader chain? Right now, i have to clear the uses but that feels like it defeats what webpack-chain is trying for.

//base.js

config.module
	.rule('Javascript')
		.test(/\.jsx?$/)
		.enforce('pre')
		.include
			.add(path.resolve(__dirname, 'src'))
			.end()
		.use('babel')
			.loader('babel-loader');

//development.js

config.module
	.rule('Javascript').uses.clear().end()
	.use('hot')
		.loader('react-hot-loader/webpack').end()
	.use('babel')
		.loader('babel-loader');

[eliperelman]

I can't say that I have the best answer to this problem right now. This wouldn't be the easiest to work around in Webpack either, as you need to know the right injection point in the array to insert the other loaders at.

My recommendation would probably be to restructure how you require these 2 together. Consider requiring development.js config before base.js:

// development.js
const config = new Config();

config.module
  .rule('Javascript')
  .test...

require('./base')(config);

module.exports = config.toConfig();

[eliperelman]

Closing as resolved. If this solution doesn't work, please feel free to reopen and discuss. Thanks!

[eliperelman]

@psachs21 I've got a PR in progress (#42) that should give you a much better solution to this:

config.module
  .rule('Javascript')
	.use('hot')
      .loader('react-hot-loader/webpack')
      .before('babel');

[paul-sachs]

@eliperelman That looks like a fantastic solution to my issue! Thanks. I'll keep an eye out for the release!

[dimensi]

@eliperelman add this feature plz in docs. I found about this feature only here.

[edmorley]

@dimensi I've filed #114 for this. If someone is up for opening a PR for the docs that would be awesome, otherwise I'll take a look once the Neutrino 9 release is finished.

[Akimyou]

@psachs21 I've got a PR in progress (#42) that should give you a much better solution to this:

config.module
  .rule('Javascript')
	.use('hot')
      .loader('react-hot-loader/webpack')
      .before('babel');

Thanks for this PR. But it look like nothing docs about this in README.md. Hope can update it in the docs.

[cha0s]

Just wanted to note that this exists here now: https://neutrinojs.org/webpack-chain/#config-plugins-ordering-before

Because this issue was the top result when I searched :)