Webpack5源码之seal阶段（流程图）分析(一)

2023-10-10 07:29:28

前言

Webpack 5中的seal阶段是一个关键步骤，它负责将编译器构建的模块图转换为依赖图。这对于理解Webpack的内部工作原理至关重要，并且可以帮助开发者优化其构建配置。本文将深入分析seal阶段，重点关注其流程图和核心模块，以便为读者提供对Webpack 5构建过程的全面了解。

seal阶段流程图

Webpack 5的seal阶段可以分为以下几个主要步骤：

[流程图]

确定入口点： seal阶段从确定入口点开始，它可能是单个文件或一组文件。
创建初始模块： 对于每个入口点，都会创建一个初始模块，它包含该入口点的源代码。
解析模块依赖关系： seal阶段解析初始模块的依赖关系，并为每个依赖关系创建一个新的模块。
递归解析依赖关系： 该过程会递归地重复，直到解析所有依赖关系。
链接模块： 在解析了所有依赖关系之后，Webpack会链接模块，这意味着将每个模块的依赖关系添加到其依赖列表中。
密封模块图： 最后，Webpack会密封模块图，使其不可变。

核心模块

seal阶段的核心模块负责执行上述步骤。以下是一些最重要的模块：

EntryModuleFactory： 负责创建初始模块。
DependencyParser： 负责解析模块的依赖关系。
DependencyTemplate： 负责为依赖关系生成代码。
DependencyGraph： 负责存储和管理依赖图。
ModuleGraph： 负责存储和管理模块图。

具体分析

确定入口点：

const entryModule = compilation.createModule(entryPoint, identifier);

创建初始模块：

const module = compilation.createModule(identifier, {
  resource: identifier,
  rawRequest: identifier,
  parsedRequest: identifier,
  name: identifier,
});

解析模块依赖关系：

const dependency = new NormalModuleFactory().createDependency(module, request, parserContext);

递归解析依赖关系：

const dependencies = module.getAllDependencies();
for (const dependency of dependencies) {
  const childModule = compilation.createModule(dependency.identifier, dependency.name);
  parseModuleDependencies(childModule, dependency, parserContext);
}

链接模块：