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

Question

比如说下面的Loader写法：

style-loader!css-loader!sass-loader

我们一般都是习惯从左往右，为什么Loader的写法是从右往左呢？

Answer 1

感谢zvit指出之前的答案问题。

其实为啥是从右往左，而不从左往右，只是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");

===================== 分隔线 之前的答案 =========================

首先你明白每个loder是干嘛的

• less-loader 是将less文件编译成css

• sass-loader 是将sass文件编译成css

• css-loader 是处理css文件中的url()等

• style-loader 将css插入到页面的style标签顺便告诉你

其次你需明白loader的加载顺序是从右往左，从下往上，所以如果你用sass的语法写了样式，那么首先经过sass-loader编译成css，css-loader处理样式里面内容，style-loader再把样式添加到style标签里面，一步一步各司其职。