Webpack 是一个强大的模块打包工具，它不仅可以打包 JavaScript，还可以打包 CSS，图片等其他资源。Webpack Loaders 是用来处理这些非 JavaScript 的模块的。
在 Webpack 中，Loaders 是用来对模块的源代码进行转换。Loaders 可以将文件转换为模块，也可以将模块进行转换，比如解析 ES6 代码、处理 CSS 样式等。
在本文中，我们将深入了解 Webpack Loaders 的执行顺序和钩子机制，以及如何编写一个 Loader。
Webpack Loaders 的执行顺序
Webpack Loaders 的执行顺序是从右向左、从下向上的。也就是说，每个 Loader 在处理模块的时候，都是从右侧到左侧进行处理的，一直到最后一个 Loader 处理完毕后，才会交给 Webpack 进行最终的打包。
- ----- -------- ---- ----------- ---------- ---------- -
如上代码所示，文件匹配到了以 .js 结尾的文件后，先用 loader3 进行处理，然后将处理后的结果交给 loader2，再将处理后的结果交给 loader1 处理，最终交给 Webpack 进行打包。
Webpack Loaders 的钩子机制
Webpack 提供了一些 Loader 钩子，用来在 Loader 的处理过程中插入自定义的逻辑。这些钩子可以让开发者在代码转换的不同阶段添加自定义的代码，或者对转换后的代码进行修改。
钩子类型
Webpack 提供了两种类型的 Loader 钩子：同步和异步。
同步钩子通过 this.callback() 函数来传递转换后的代码。示例代码如下：
-------------- - ---------------- - ----- ------ - ---------------------- ------- ------------------- -------- --
异步钩子是通过 this.async() 函数来传递转换后的代码。示例代码如下：
-------------- - ---------------- -
----- -------- - -------------
------------- -- -
----- ------ - ---------------------- -------
-------------- --------
-- ------
--钩子执行顺序
Webpack 提供了一些 Loader 钩子，它们的执行顺序如下：
- Pitch Loader（标记为
pitch） - Loader 的
pre钩子 - Loader 的
normal钩子 - Loader 的
post钩子 - 清除残留的 pitch loader
Pitch Loader 是特殊的 Loader，它会在其它 Loader 执行前被执行。如果有多个 Pitch Loader，则会按照 Loader 链条的顺序，从右到左执行。
Normal Loader 是普通的 Loader，这些 Loader 的代码会按照 use 数组的顺序执行。pre 和 post 钩子可以用来在 Normal Loader 执行前或者执行后执行一些代码。
钩子的返回值
每个 Loader 钩子都可以返回一个值，这个值会被传递给下一个 Loader 或者最终的打包结果。在 Pitch Loader 中，需要返回一个能够被解析成 JavaScript 模块的字符串。
Loader 的执行顺序示例
假设有三个 Loader：loader1、loader2 和 loader3。在配置中，loader3 的 pitch 钩子返回了一个字符串，这个字符串会被解析成一个和模块匹配的文件路径，然后加载这个文件路径对应的模块。示例配置如下：
-
----- --------
---- -
-
------- ----------
-------- --
--
-
------- ----------
-------- --
--
-
------- ----------
-------- --
-
-
-按照钩子的执行顺序执行，最终的执行顺序如下：
-- ------- ----- -- --------------------------- ------ -- ------- ----- -- ------- ----- -- ------- ------ -- ------- ------ -- ------- ------
如何编写一个 Loader
编写一个 Loader 首先需要一个函数，这个函数接受一个参数，即需要处理的源代码，然后返回一个处理后的结果。这个函数可以是同步函数，也可以是异步函数。有了这个函数，就可以将它导出为一个 NodeJS 模块，这个模块即为一个 Loader。
下面是一个简单的 Loader 的示例代码，它会将代码中的 foo 替换为 bar。
-------------- - ---------------- - ------ ---------------------- ------- --
在实际应用中，更复杂的 Loader 可以使用各种 Node 模块来实现。例如，可以使用 acorn 来解析 JavaScript 并输出 AST（Abstract Syntax Tree），再使用 Recast 来修改 AST，并将其转换回源代码。
总结
本文介绍了 Webpack Loaders 的执行顺序和钩子机制，以及如何编写一个 Loader。理解这些内容可以让开发者更好地使用 Webpack，定制自己需要的打包方式。同时，这也为我们深入了解 Webpack 提供了一个入口。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65b61682add4f0e0ffec88be