Webpack 2 loaders declared in reverse?

Question

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?

Answer 1

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.