从 webpack 4 源码解析 Module 的构建（上）
2023-10-10 19:36:01
揭开 webpack 模块构建过程的神秘面纱
在前端开发领域，webpack 堪称一款明星级构建工具，它能将各种资源（诸如 JavaScript、CSS、图片等）打包成易于浏览器使用的文件。模块是 webpack 中的基本组成单位，它代表了一个待编译的文件或资源。
在 webpack 4 中，模块的构建过程由 normalModuleFactory 对象掌控。normalModuleFactory 负责创建和管理模块，本文将深入剖析它如何构建模块，以及过程中涉及到的钩子机制。
创建模块：normalModuleFactory.hooks:createModule 钩子
模块构建之旅始于 normalModuleFactory.hooks:createModule 钩子。在这里，webpack 根据给定的资源创建 module 实例。若项目配置中自定义了模块，则使用该配置；否则，使用 webpack 默认生成的模块。
normalModuleFactory.createModule(data, callback);
// data 参数
{
request: '资源路径',
rawRequest: '未解析前的资源路径',
context: '上下文目录',
fromCache: '模块是否来自缓存'
}
如果 fromCache 为 true，表明模块已缓存，webpack 会直接加载并通过回调函数返回模块实例。
如果 fromCache 为 false，webpack 会创建新模块实例：
- 通过 resolveRequest 方法解析资源路径。
- 根据解析后的路径创建 module 实例。
- 触发 normalModuleFactory.hooks:createModule 钩子，允许插件修改或替换模块实例。
- 通过回调函数返回模块实例。
创建模块工厂：normalModuleFactory.hooks:moduleFactory 钩子
normalModuleFactory.hooks:moduleFactory 钩子是模块构建过程的下一站。在此钩子中，webpack 根据模块类型创建 module factory 实例，负责管理模块构建流程。
normalModuleFactory.createModuleFactory(module, callback);
// module 参数
{
type: '模块类型'
}
根据模块类型，webpack 会创建不同的 module factory 实例：
javascript/auto：创建一个 JavascriptModuleFactory 实例。javascript/dynamic：创建一个 DynamicJavascriptModuleFactory 实例。
webpack 会触发 normalModuleFactory.hooks:moduleFactory 钩子，允许插件修改或替换 module factory 实例，然后通过回调函数返回该实例。
模块构建流程
module factory 实例创建后，模块构建流程正式开始：
- module factory 解析模块依赖项。
- 根据依赖项创建模块图。
- 调用 compile 方法编译模块。
- 处理编译结果，生成最终的模块代码。
钩子机制
webpack 巧妙地利用了钩子机制，允许插件在各个构建阶段介入流程，定制和扩展 webpack 的功能。
结论
深入了解 webpack 模块构建过程有助于我们更好地理解 webpack 的工作原理，进而优化我们的构建流程。
常见问题解答
1. 什么是 webpack？
webpack 是一个前端构建工具，用于打包资源并创建浏览器可用的文件。
2. 什么是模块？
模块是 webpack 中的基本单位，代表一个需要编译的文件或资源。
3. normalModuleFactory 的作用是什么？
normalModuleFactory 负责创建和管理 webpack 中的模块。
4. normalModuleFactory 中有哪些关键钩子？
- normalModuleFactory.hooks:createModule ：用于创建模块实例。
- normalModuleFactory.hooks:moduleFactory ：用于创建 module factory 实例，负责管理模块构建流程。
5. 模块构建流程是怎样的？
- 解析模块依赖项。
- 创建模块图。
- 编译模块。
- 处理编译结果，生成最终的模块代码。
