源码篇 03：webpack5 的 Loader-Runner 源码浅析

2023-09-24 10:30:22

前言

webpack 的 Loader 机制是其强大功能之一，它允许你使用各种 loader 来预处理你的代码，以便更好地满足你的项目需求。而在 webpack 的运行过程中，有一个关键组件——Loader-Runner，它负责管理和调度 loader 的执行顺序，以确保代码的正确编译。本文将带你深入探索 webpack5 中的 Loader-Runner 源码，揭示其核心工作机制，并通过一个 100 行代码的迷你版 Loader-Runner 实现来加深你的理解。

Loader-Runner 的核心工作原理

Loader-Runner 的核心工作原理可以归纳为以下几个步骤：

初始化 LoaderContext：在开始加载器之前，Loader-Runner 会创建一个 LoaderContext 对象，其中包含了有关当前加载过程的各种信息，如当前正在处理的文件、loader 的配置等。
解析 Loader：根据 LoaderContext 中的信息，Loader-Runner 会解析出需要加载的 loader，并将其实例化。
执行 Loader：Loader-Runner 会按照一定的顺序执行这些 loader。对于每个 loader，它会调用其 run 方法，并传入 LoaderContext 对象。Loader 可以使用 LoaderContext 中的信息来处理文件内容，并将其作为结果返回。
处理 Loader 结果：当所有的 loader 都执行完毕后，Loader-Runner 会将最后一个 loader 的结果作为最终的输出。

深入解析 Loader-Runner 源码

Loader-Runner 的源码位于 webpack 源码库的 lib/Loaders/LoaderRunner.js 文件中。该文件的内容相对复杂，但其核心逻辑可以归纳为以下几个部分：

LoaderRunner 类：这是一个包含 Loader-Runner 核心功能的类。
LoaderContext 类：这是一个包含有关当前加载过程信息的类。
runLoaders 方法：这是一个负责执行 loader 的方法。
runPitchingLoaders 方法：这是一个负责执行 pitch loader 的方法。

实现一个迷你版的 Loader-Runner

为了更好地理解 Loader-Runner 的工作原理，我们可以在迷你版 Loader-Runner 的实现。该实现仅包含了 Loader-Runner 的核心功能，并使用 100 行代码左右实现。

// 迷你版 Loader-Runner 实现

// 创建一个 LoaderContext 对象
const loaderContext = {
  resource: './src/main.js',
  loaders: [
    './loaders/loader1',
    './loaders/loader2',
    './loaders/loader3',
  ],
};

// 解析并实例化 loader
const loaders = loaderContext.loaders.map((loader) => {
  const loaderModule = require(loader);
  return new loaderModule();
});

// 执行 loader
const result = runLoaders(loaders, loaderContext);

// 处理 loader 结果
console.log(result);

// 定义 runLoaders 方法
function runLoaders(loaders, loaderContext) {
  let result = loaderContext.resource;

  // 循环执行 loader
  for (let i = 0; i < loaders.length; i++) {
    const loader = loaders[i];

    // 调用 loader 的 run 方法
    result = loader.run(result, loaderContext);
  }

  // 返回最终结果
  return result;
}