CODEWITHSUNDEEP
webpack
Ruegen
Ruegen

Reputation: 665

Webpack 2 loaders declared in reverse?

When using webpack 2, why is it that loaders need to be added for the "use:" key in reverse order? Why not list each loader from first to last, left to right? Is there a reason?

Upvotes: 8

Views: 730

Answers (1)

redOctober13
redOctober13

Reputation: 3974

It seems like a convention that could just as easily be the other way to match the convention of execution order matching source order, but the reason it uses this "reverse" order is because it's not using a sequential model, but a nested one. Like an onion, the top/left items wrap the lower/right items.

The reason is that they are essentially function calls, so this:

rules: {
  test: /\.css$/,
  use: [
    'style-loader',
    'css-loader'
  ]
}

doesn't mean "Do the CSS Loader, then the Style Loader" and is just declared backwards. Instead, it's essentially equivalent to style-loader(css-loader()), so as you go down the list, each subsequent loader is a nested function.

Hope that helps.

Upvotes: 18

Related Questions