[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)