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);