[TOC] # webpack 的 loader 从右到左（或从下到上）进行？ 只是 Webpack 选择了 compose 方式，而不是 pipe 的方式而已，在技术上实现从左往右也不会有难度。 函数组合是函数式编程中非常重要的思想。 函数组合的两种形式：一种是 pipe（从左向右组合函数），另一种是 compose（从右向左组合函数）。 在 Uninx 有 pipeline 的概念，平时应该也有接触，比如 `ps aux | grep node`，这些都是从左往右的。 但是在函数式编程中有组合的概念，我们数学中常见的 `f(g(x))`，在函数式编程中一般的实现方式是从右往左，如： ~~~js 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。 > [loader | webpack (docschina.org)](https://webpack.docschina.org/concepts/loaders/) # loader 工具库(Loader Utilities)[](https://webpack.docschina.org/contribute/writing-a-loader/#loader-工具库-loader-utilities-) 充分利用 [`loader-utils`](https://github.com/webpack/loader-utils) 包。它提供了许多有用的工具，但最常用的一种工具是获取传递给 loader 的选项。 [`schema-utils`](https://github.com/webpack-contrib/schema-utils) 包配合 `loader-utils`，用于保证 `loader` 选项，进行与 JSON Schema 结构一致的校验。 这里有一个简单使用两者的例子： **loader.js** ``` import { getOptions } from 'loader-utils'; import validateOptions from 'schema-utils'; const schema = { type: 'object', properties: { test: { type: 'string' } } }; export default function(source) { const options = getOptions(this); // 获取到用户给当前 Loader 传入的 options validateOptions(schema, options, 'Example Loader'); // 对资源应用一些转换…… return `export default ${ JSON.stringify(source) }`; } ``` webpack 5开始，loader 插件上下文自带了 [`this.getOptions`](https://webpack.js.org/api/loaders/#thisgetoptionsschema) # 参考 [loader的工作原理以及实现一个md-loader](https://github.com/6fedcom/fe-blog/tree/master/webpack/loader) [loader1、loader的配置和执行顺序](https://blog.csdn.net/qq_17175013/article/details/87247975) [编写一个 loader](https://webpack.docschina.org/contribute/writing-a-loader/) [webpack系列——实现一个行内样式px转vw的loader](https://segmentfault.com/a/1190000016374998)