Webpack原理剖析与实现
1. 整体架构设计
Webpack 5 的整体架构设计包括以下几个核心模块：
-
Compiler：负责整个编译过程，从读取配置、解析模块、生成依赖图，到输出最终的打包结果，主要文件是 lib/Compiler.js 。
-
Compilation：代表一次编译过程，包括所有模块、依赖关系和编译结果，主要文件是 lib/Compilation.js 。
-
Module：表示独立的模块，包含其依赖关系和代码内容，主要文件是 lib/Module.js 。
-
Chunk：代表代码块，是构建过程中生成的中间结果，用于优化和分割代码，主要文件是 lib/Chunk.js 。
-
Dependency：代表模块之间的依赖关系。
-
Resolver：负责解析模块的路径和依赖。
-
Loader：用于对模块内容进行转换，如将 TypeScript 转换为 JavaScript。
-
Plugin：通过 Tapable 插件机制扩展 Webpack 功能。
2. 核心源码实现
2.1. Compiler
lib/compiler.js 文件中，Compiler 类是 Webpack 的核心类之一，负责协调整个编译过程。关键代码如下:
class Compiler {constructor(context) {this.context = context;this.hooks = {// 定义各种钩子run: new AsyncSeriesHook(['compiler']),compile: new SyncHook(['params']),// 其他钩子省略...};}run(callback) {this.hooks.run.callAsync(this, err => {if (err) return callback(err);this.compile(callback);});}compile(callback) {const params = this.newCompilationParams();this.hooks.compile.call(params);const compilation = this.newCompilation(params);// 进行模块编译compilation.seal(err => {if (err) return callback(err);// 输出打包结果this.emitAssets(compilation, callback);