为什么 loader 在 webpack 中是从右到左读取的?
Why are loaders read from right to left in webpack?
在 webpack 中,当加载器应用于某些文件时,例如:
require("style-loader!css-loader!less-loader!./my-styles.less");
他们从右到左工作。
我觉得很奇怪,这是什么技术原因?
因为跟在pipeline concept in unix之后,所以一个进程的输出成为下一个进程的输入。由于意图是先通过 less-loader 处理 my-styles.less
,因此将它们并排写入并用管道分隔(即 !)。它也可以实现为允许 require("./my-styles.less!less-loader!css-loader!style-loader");
。两者在技术难度上没有区别。
我认为注意管道和作曲之间的区别很重要。在 *nix 环境中,您可以从左到右传递命令:
cat file.txt | egrep cars > output.txt
但在函数式编程中,您可以将函数组合在一起,函数将从右到左执行:
var fn0 = compose(divide(2), add(3));
var fn1 = pipe(add(3), divide(2));
fn0 和 fn1 将对其输入产生相同的影响。两者都会先将 3 添加到他们的输入中,并将该操作的输出除以 2。由于我们自然地从左到右阅读,因此需要熟悉编写约定。
在我看来,Webpack 遵循从右到左排列的组合与管道的约定。查看 Ramda 的文档以获得技术规范:
在 webpack 中,当加载器应用于某些文件时,例如:
require("style-loader!css-loader!less-loader!./my-styles.less");
他们从右到左工作。
我觉得很奇怪,这是什么技术原因?
因为跟在pipeline concept in unix之后,所以一个进程的输出成为下一个进程的输入。由于意图是先通过 less-loader 处理 my-styles.less
,因此将它们并排写入并用管道分隔(即 !)。它也可以实现为允许 require("./my-styles.less!less-loader!css-loader!style-loader");
。两者在技术难度上没有区别。
我认为注意管道和作曲之间的区别很重要。在 *nix 环境中,您可以从左到右传递命令:
cat file.txt | egrep cars > output.txt
但在函数式编程中,您可以将函数组合在一起,函数将从右到左执行:
var fn0 = compose(divide(2), add(3));
var fn1 = pipe(add(3), divide(2));
fn0 和 fn1 将对其输入产生相同的影响。两者都会先将 3 添加到他们的输入中,并将该操作的输出除以 2。由于我们自然地从左到右阅读,因此需要熟悉编写约定。
在我看来,Webpack 遵循从右到左排列的组合与管道的约定。查看 Ramda 的文档以获得技术规范: