Webpack Loaders 的执行顺序及钩子机制-JavaScript中文网-JavaScript教程资源分享门户

Webpack 是一个强大的模块打包工具，它不仅可以打包 JavaScript，还可以打包 CSS，图片等其他资源。Webpack Loaders 是用来处理这些非 JavaScript 的模块的。

在 Webpack 中，Loaders 是用来对模块的源代码进行转换。Loaders 可以将文件转换为模块，也可以将模块进行转换，比如解析 ES6 代码、处理 CSS 样式等。

在本文中，我们将深入了解 Webpack Loaders 的执行顺序和钩子机制，以及如何编写一个 Loader。

Webpack Loaders 的执行顺序

Webpack Loaders 的执行顺序是从右向左、从下向上的。也就是说，每个 Loader 在处理模块的时候，都是从右侧到左侧进行处理的，一直到最后一个 Loader 处理完毕后，才会交给 Webpack 进行最终的打包。

{
  test: /\.js$/,
  use: ['loader1', 'loader2', 'loader3']
}

如上代码所示，文件匹配到了以 .js 结尾的文件后，先用 loader3 进行处理，然后将处理后的结果交给 loader2，再将处理后的结果交给 loader1 处理，最终交给 Webpack 进行打包。

Webpack Loaders 的钩子机制

Webpack 提供了一些 Loader 钩子，用来在 Loader 的处理过程中插入自定义的逻辑。这些钩子可以让开发者在代码转换的不同阶段添加自定义的代码，或者对转换后的代码进行修改。

钩子类型

Webpack 提供了两种类型的 Loader 钩子：同步和异步。

同步钩子通过 this.callback() 函数来传递转换后的代码。示例代码如下：

module.exports = function(source) {
  const result = source.replace(/foo/g, 'bar');
  this.callback(null, result);
};

异步钩子是通过 this.async() 函数来传递转换后的代码。示例代码如下：

module.exports = function(source) {
  const callback = this.async();
  setTimeout(() => {
    const result = source.replace(/foo/g, 'bar');
    callback(null, result);
  }, 1000);
};

钩子执行顺序

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 钩子返回了一个字符串，这个字符串会被解析成一个和模块匹配的文件路径，然后加载这个文件路径对应的模块。示例配置如下：

-- -------------------- ---- -------
-
  ----- --------
  ---- -
    -
      ------- ----------
      -------- --
    --
    -
      ------- ----------
      -------- --
    --
    -
      ------- ----------
      -------- --
    -
  -
-

按照钩子的执行顺序执行，最终的执行顺序如下：

// loader3 pitch
// 返回一个字符串，解析成匹配文件路径，加载文件路径对应的 module
// loader2 pitch
// loader1 pitch
// loader1 normal
// loader2 normal
// loader3 normal

如何编写一个 Loader

编写一个 Loader 首先需要一个函数，这个函数接受一个参数，即需要处理的源代码，然后返回一个处理后的结果。这个函数可以是同步函数，也可以是异步函数。有了这个函数，就可以将它导出为一个 NodeJS 模块，这个模块即为一个 Loader。

下面是一个简单的 Loader 的示例代码，它会将代码中的 foo 替换为 bar。

module.exports = function(source) {
  return source.replace(/foo/g, 'bar');
};

在实际应用中，更复杂的 Loader 可以使用各种 Node 模块来实现。例如，可以使用 acorn 来解析 JavaScript 并输出 AST（Abstract Syntax Tree），再使用 Recast 来修改 AST，并将其转换回源代码。

总结

本文介绍了 Webpack Loaders 的执行顺序和钩子机制，以及如何编写一个 Loader。理解这些内容可以让开发者更好地使用 Webpack，定制自己需要的打包方式。同时，这也为我们深入了解 Webpack 提供了一个入口。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/65b61682add4f0e0ffec88be