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; //加1const double = n => n * 2; // 乘2const 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");