Webpack的Loader为什么是从右往左写？

Question

比如说下面的Loader写法：style-loader!css-loader!sass-loader我们一般都是习惯从左往右，为什么Loader的写法是从右往左呢？

Answer 1

其实为啥是从右往左，而不从左往右，只是Webpack选择了compose方式，而不是pipe的方式而已，在技术上实现从左往右也不会有难度

在Uninx有pipeline的概念，平时应该也有接触，比如 ps aux | grep node，这些都是从左往右的。

但是在函数式编程中有组合的概念，我们数学中常见的f(g(x))，在函数式编程一般的实现方式是从右往左，如

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) 

这里可以看到我们先执行的加1，然后执行的double，在compose中是采用reduceRight，所以我们传入参数的顺序编程了先传入double，后传入add1

那么其实也可以实现从左往右

const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

const add1ThenDouble = pipe(

  add1,

  double

);

add1ThenDouble(2); // 6

// ((2 + 1 = 3) * 2 = 6)

所以只不过webpack选择了函数式编程的方式，所以loader的顺序编程了从右往左，如果webpack选择了pipe的方式，那么大家现在写loader的时候的顺序就变成从左往右了

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

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