Webpack Compiler 源碼全面解析

Compiler

類圖解析：

1. Tapable 基類

Webpack 插件系統的核心，提供鉤子注冊（plugin）和觸發（applyPlugins）能力。Compiler 和 Compilation 均繼承此類，支持插件通過生命周期鉤子介入構建流程。

2. Compiler 類

? 核心屬性

 ? `options`：整合 Webpack 配置（入口、出口、Loader 等）  ? `hooks`：包含 `run`（構建啟動）、`compile`（編譯開始）、`emit`（資源生成前）等鉤子，插件可監聽這些事件  

? 核心方法

 ? `run()`：啟動構建流程，觸發 `beforeRun` 和 `run` 鉤子  ? `compile()`：創建 `Compilation` 實例，進入模塊解析階段

3. Compilation 類

? 核心屬性

 ? `modules`：所有被處理的模塊集合，包含源碼和依賴信息  ? `chunks`：代碼分塊（如通過 `SplitChunksPlugin` 分割的公共模塊）  ? `assets`：最終輸出的文件內容（如 JS、CSS、圖片等）  

? 核心方法

 ? `addEntry()`：從入口文件遞歸分析依賴，構建模塊依賴圖  ? `seal()`：凍結依賴圖，執行 Tree Shaking 和代碼壓縮等優化  ? `emitAsset()`：將資源寫入磁盤，觸發 `emit` 鉤子

4 協作關系

? 生命周期：Compiler 管理全局構建流程（如初始化配置、觸發鉤子），而 Compilation 負責單次編譯的具體實現（模塊解析、優化、輸出）

? 實例化：每次構建（包括開發模式下文件變化）時，Compiler 會創建新的 Compilation 實例，確保資源狀態隔離。

應用場景示例：
? 插件開發：通過監聽 Compiler.hooks.emit 修改輸出內容（如刪除注釋）

? 性能優化：利用 Compilation.modules 分析模塊體積，實現按需加載。

---

在前端工程化中，自定義 Webpack 的 Loader 和 Plugin 是擴展構建流程的核心能力。以下從實現原理、開發步驟、典型場景等維度深入解析兩者的設計與應用：

---

自定義loader和plugin

一、自定義 Loader 的實現

1. 核心原理與開發步驟

? 本質與作用

Loader 是文件轉換器，將非 JS 文件（如 Markdown、CSS）轉換為 Webpack 可處理的模塊。其開發需遵循單一職責原則，且需保持無狀態。

? 實現步驟：

1. 創建函數：導出一個處理文件內容的函數，接收 source（文件內容）作為輸入。
2. 處理內容：通過正則或工具庫（如 marked、babel）對內容轉換，例如將 Markdown 轉 HTML。
3. 返回結果：需返回 JS 代碼字符串，支持 module.exports 或 ES Modules 導出。
4. 配置使用：在 webpack.config.js 的 module.rules 中通過 test 匹配文件類型并串聯 Loader。

2. 同步與異步 Loader

? 同步處理：直接返回結果，適用于簡單轉換（如字符串替換）。

module.exports = function (content) {return content.replace(/world/g, 'loader'); // 替換文本
};

? 異步處理：通過 this.async() 實現異步操作（如網絡請求、文件讀取）。

module.exports = function (content) {const callback = this.async();fetchData().then(() => callback(null, processedContent));
};

3. 典型場景示例

? 多語言翻譯：替換代碼中的 __t('KEY') 為對應語言字符串。

? 資源優化：使用 svgo 壓縮 SVG 文件，或通過 imagemin 生成 WebP 圖片。

? 語法轉換：自定義 Babel Loader 實現 ES6 轉 ES5。

---

二、自定義 Plugin 的實現

1. 核心機制與生命周期

? 實現原理：

Plugin 通過監聽 Webpack 生命周期鉤子（如 emit、done）介入構建流程，操作 compiler 和 compilation 對象。

? 開發步驟：

1. 創建類：定義包含 apply 方法的類，接收 compiler 對象。
2. 注冊鉤子：在目標鉤子（如 emit）中掛載邏輯，操作資源或生成附加文件。
3. 配置使用：在 plugins 數組中實例化插件。

2. 典型場景示例

? 打包報告生成：在 done 鉤子中生成包含構建時間、模塊大小的 JSON 報告。

? 資源修改：在 emit 階段遍歷 compilation.assets，刪除 JS 注釋或修改文件內容。

compiler.hooks.emit.tap('MyPlugin', (compilation) => {Object.keys(compilation.assets).forEach(name => {if (name.endsWith('.js')) {const content = compilation.assets[name].source().replace(/\/\*.*?\*\//g, '');compilation.assets[name] = { source: () => content, size: () => content.length };}});
});

? 自動化注入：類似 HtmlWebpackPlugin，動態生成 HTML 并插入腳本。

3. 高級應用

? 自定義鉤子：通過 tapable 創建同步/異步鉤子，擴展插件間的通信能力。

? 多插件協作：結合其他插件（如 CleanWebpackPlugin）清理構建目錄。

---

三、Loader 與 Plugin 的協同與對比

維度	Loader	Plugin
作用層級	單文件處理（如轉譯、壓縮）	全局流程控制（如資源優化、報告生成）
執行時機	模塊加載階段	任意構建階段（通過鉤子介入）
配置方式	module.rules 中定義規則鏈	plugins 數組實例化
典型工具	babel-loader、css-loader	HtmlWebpackPlugin、TerserPlugin

---

四、調試與優化建議

1. Loader 調試
   ? 使用 loader-runner 獨立測試邏輯。

   ? 通過 this.getOptions() 獲取配置參數，結合 schema.json 校驗參數合法性。

2. Plugin 性能優化
   ? 在 afterEmit 階段執行耗時操作，避免阻塞主流程。

   ? 利用 compilation.fileTimestamps 緩存文件修改時間，減少重復處理。

---

五、總結

自定義 Loader 和 Plugin 是 Webpack 生態靈活性的核心體現。Loader 聚焦于文件級轉換，適合語法兼容、資源預處理等場景；Plugin 則通過生命周期鉤子實現全局控制，適用于構建優化、自動化注入等復雜需求。兩者的協同使用可覆蓋從模塊處理到工程化優化的全鏈路需求，開發者可根據具體場景選擇合適方案。

---

1. 自定義 Loader：將 Markdown 轉換為 HTML。
2. 自定義 Plugin：構建結束發送通知（以控制臺模擬為例，實際可擴展為系統通知）。
3. 自定義 Plugin：構建時檢測重復依賴并輸出警告。

---

樣例

🔧 1. 自定義 Markdown 轉 HTML Loader

依賴：安裝 marked（或 markdown-it）

npm install marked --save-dev

loaders/md-to-html-loader.js

const marked = require('marked');module.exports = function (source) {const html = marked(source);// 返回一段 JS 模塊代碼，導出 HTML 字符串return `export default ${JSON.stringify(html)}`;
};

webpack.config.js 中配置：

module.exports = {module: {rules: [{test: /\.md$/,use: path.resolve(__dirname, 'loaders/md-to-html-loader.js')}]}
};

---

🔔 2. 自定義構建結束發送通知 Plugin

控制臺通知實現（也可以結合 node-notifier 發桌面通知）

plugins/build-notifier-plugin.js

class BuildNotifierPlugin {apply(compiler) {compiler.hooks.done.tap('BuildNotifierPlugin', (stats) => {const time = (stats.endTime - stats.startTime) / 1000;console.log(`? 構建完成！耗時 ${time.toFixed(2)} 秒`);});}
}module.exports = BuildNotifierPlugin;

webpack.config.js 中配置：

const BuildNotifierPlugin = require('./plugins/build-notifier-plugin');module.exports = {plugins: [new BuildNotifierPlugin()]
};

可選增強：使用 node-notifier 發系統彈窗提示。

---

🧩 3. 自定義重復依賴檢測 Plugin

這個插件會分析所有模塊中使用的依賴包并查找是否存在多個版本的情況（如多個 lodash）

plugins/duplicate-dependency-plugin.js

const path = require('path');
const fs = require('fs');class DuplicateDependencyPlugin {apply(compiler) {compiler.hooks.emit.tapAsync('DuplicateDependencyPlugin', (compilation, callback) => {const moduleVersions = {};compilation.modules.forEach((module) => {if (module.resource && module.resource.includes('node_modules')) {const parts = module.resource.split('node_modules' + path.sep);if (parts[1]) {const pkgPath = parts[1].split(path.sep);const name = pkgPath[0].startsWith('@') ? `${pkgPath[0]}/${pkgPath[1]}` : pkgPath[0];const packageJsonPath = path.join(module.resource.split('node_modules')[0], 'node_modules', name, 'package.json');try {const pkg = JSON.parse(fs.readFileSync(packageJsonPath, 'utf-8'));if (!moduleVersions[name]) {moduleVersions[name] = new Set();}moduleVersions[name].add(pkg.version);} catch (err) {// 忽略找不到 package.json 的模塊}}}});// 輸出重復依賴警告Object.entries(moduleVersions).forEach(([name, versions]) => {if (versions.size > 1) {console.warn(`?? 發現重復依賴：${name}，版本有：${[...versions].join(', ')}`);}});callback();});}
}module.exports = DuplicateDependencyPlugin;

webpack.config.js 中配置：

const DuplicateDependencyPlugin = require('./plugins/duplicate-dependency-plugin');module.exports = {plugins: [new DuplicateDependencyPlugin()]
};

---

📦 最終項目結構參考

webpack-project/
├── loaders/
│   └── md-to-html-loader.js
├── plugins/
│   ├── build-notifier-plugin.js
│   └── duplicate-dependency-plugin.js
├── src/
│   └── index.js
├── content/
│   └── example.md
├── webpack.config.js
└── package.json

---