Why is the loading order of webpack's loader from right to left?

In fact, why is it from right to left instead of left to right, it's just that Webpack chooses the compose method instead of the pipe method, and it will not be difficult to implement from left to right technically

There is a concept of pipeline in Uninx, and there should be contacts in ordinary times. For example  ps aux | grep node, these are from left to right.

But there is a concept of composition in functional programming, which is common in our mathematics. The f(g(x))general implementation method in functional programming is from right to left, such as

const compose = (...fns) => x => fns.reduceRight((v, f) => f(v), x);
const add1 = n => n + 1; //加1
const double = n => n * 2; // 乘2
const add1ThenDouble = compose(
  double,
  add1
);
add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6) 

Here you can see that we execute the addition of 1 first, and then execute the double. In compose, we use reduceRight, so the order in which we pass in the parameters is programmed to pass in double first, then add1

In fact, it can also be achieved from left to right

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);
const add1ThenDouble = pipe(
  add1,
  double
);
add1ThenDouble(2); // 6
// ((2 + 1 = 3) * 2 = 6)

So it's just that webpack chooses the functional programming method, so the order of loaders is programmed from right to left. If webpack chooses the pipe method, then the order when everyone writes loaders now becomes from left to right.

  • compose : require("style-loader!css-loader!sass-loader!./my-styles.sass");

  • pipe : require("./my-styles.sass!sass-loader!css-loader!style-loader");

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=325941288&siteId=291194637