時至今日，Webpack 已迭代到 5.x 版本，其功能模塊的擴充和復雜度的提升使得源碼學習成本陡增。官方文檔的晦澀表述更是讓許多開發者望而卻步。然而，理解 Webpack 的核心原理對優化構建流程、定制化打包方案至關重要。本文將通過簡化流程和代碼示例，剖析 Webpack 的運作機制，幫助讀者從本質層面掌握其核心能力，突破“配置工程師”的局限。
Webpack 的核心能力
Webpack 本質上是一個 JavaScript 應用程序的靜態模塊打包器。它將應用程序中的資源（JS、CSS、圖片等）視為模塊，分析依賴關系后打包成靜態資源文件，官網的動畫就能很好的詮釋這一點。
其核心能力可概括為：
- 模塊化整合：將分散的代碼按依賴關系組織成 chunk。
- 資源轉換：通過 Loader 系統處理非 JS 文件。
- 擴展性：通過 Plugin 系統在構建生命周期中注入自定義邏輯。
基礎使用
初始化項目
npm init -y
npm install webpack webpack-cli --save-dev
目錄結構
├── package.json
├── webpack.config.js # 配置文件
└── src├── index.js # 入口文件├── a.js└── b.js
webpack.config.js
module.exports = {mode: "development", // 開發模式（不壓縮代碼）entry: "./src/index.js",devtool: "source-map" // 生成源碼映射
};
src/index.js
console.log("index module");
const a = require('./a.js');
console.log(a);
src/a.js
console.log("a module");
const b = require('./b.js');
console.log(b);
module.exports = 'a';
src/b.js
console.log("b module");
module.exports = 'b';
打包結果分析
執行 npx webpack 后生成的 dist/main.js：
(() => {// 初始化、定義了一個模塊對象，key為模塊的路徑，value函數里面的內容就是我們書寫的模塊的代碼var __webpack_modules__ = ({"./src/a.js": ((module, __unused_webpack_exports, __webpack_require__) => {console.log("a module");const b = __webpack_require__("./src/b.js");console.log(b);module.exports = 'a';}),"./src/b.js": ((module) => {console.log("b module");module.exports = 'b';})});// 模塊緩存var __webpack_module_cache__ = {};// 定義__webpack_require__函數，就是我們在代碼中使用的require函數function __webpack_require__(moduleId) {// 查找緩存中是否有該模塊var cachedModule = __webpack_module_cache__[moduleId];if (cachedModule !== undefined) {return cachedModule.exports;}var module = __webpack_module_cache__[moduleId] = {exports: {}};__webpack_modules__[moduleId](module, module.exports, __webpack_require__);return module.exports;}// 入口文件 src/index.js(() => {console.log("index module");const a = __webpack_require__(/*! ./a.js */ "./src/a.js");console.log(a);})();
})()
打包后的核心內容包含：
- 模塊映射表：以路徑為 key，模塊代碼為 value。
- 模塊緩存：避免重復加載。
- require 函數：實現模塊依賴解析。
- 入口執行邏輯：立即執行入口模塊代碼。
那核心問題來了，Webpack 是如何將我們的源代碼打包成 dist/main.js 的?
Webpack 的工作流程
Webpack 的進行打包的工作流程可以分為三個主要階段：
- 初始化階段：合并配置，創建 Compiler 對象，加載插件。
- 編譯階段：從入口遞歸分析依賴，構建模塊依賴圖。
- 輸出階段：按 chunk 生成文件并寫入磁盤。
初始化階段
初始化階段是 Webpack 打包流程的起點，關鍵步驟：
- 合并配置（CLI 參數 + 配置文件 + 默認配置）。
- 創建 Compiler 對象（核心控制器）。
- 加載插件并綁定生命周期鉤子。
編譯階段
編譯階段是 Webpack 處理模塊的核心階段，核心過程：
- 模塊轉譯：Loader 將非 JS 文件轉為 JS，生成 AST。
- 依賴分析：遍歷 AST 提取模塊依賴，遞歸處理。
- 生成模塊表：記錄模塊代碼、依賴關系和唯一 ID。
// 編譯后的模塊表示例
const modules = [{id: "./src/a.js",dependencies: ["./src/b.js"],code: `/* 轉換后的代碼 */`}
];
編譯流程圖：
輸出階段
輸出階段是 Webpack 打包流程的最后階段，主要包括以下步驟：
- 生成 chunk：按入口和動態導入規則拆分模塊。
- 資源封裝：將 chunk 轉為包含運行時邏輯的 IIFE 函數。
- 文件寫入：根據輸出配置生成最終文件。
經過這三個階段，Webpack 就實現了將我們的源代碼打包成了最終的工程文件了。
但是在構建的整個過程中，由于瀏覽器只能認識** html、css、js** 這幾種格式的文件，所以需要對其他格式的文件進行轉換，這個就需要一個工具來實現，就是 Loader 系統 。
Loader 系統
Loader系統可以將非 JS 文件（如 CSS、圖片）轉換為 Webpack 可識別的模塊，從而納入到 Webpack 的打包流程中。
Loader 的工作原理
Loader 通過定義一個函數，將輸入的內容轉換為輸出的內容。Webpack 會將 Loader 鏈式調用，每個 Loader 處理完內容后，會將結果傳遞給下一個 Loader，直到鏈尾。
Loader 的基本結構如下：
module.exports = function (content) {// 處理內容return processedContent;
};
在 Webpack 配置中，可以通過 module.rules 來指定 Loader：
module.exports = {module: {rules: [{test: /\.js$/,use: 'babel-loader',},{test: /\.scss$/,use: ['style-loader', 'css-loader', 'sass-loader'],},],},
};
在這個配置中，test 指定了要匹配的文件類型，use 指定了要使用的 Loader 。當 Webpack 處理文件時，會根據文件類型選擇對應的 Loader 鏈來處理文件。
除了文件轉換之外，Webpack 也需要在特定時機進行一些處理，這個時候需要一個接口的設計，就是 Plugin 系統
Plugin 系統
Plugin 系統是 Webpack 功能擴展的重要機制。通過 Plugin，開發者可以實現各種功能，如代碼壓縮、提取 CSS、生成 HTML 等。
Plugin的工作原理
Plugin 通過監聽 Webpack 的生命周期事件，在特定的時機介入編譯過程。Webpack 提供了豐富的鉤子（hooks），Plugin 可以通過注冊這些鉤子來實現功能擴展。
Plugin 的基本結構如下：
class SomePlugin {apply(compiler) {// 注冊鉤子compiler.hooks.someHook.tap('SomePlugin', () => {// 實現插件功能});}
}
在 apply 函數中，Plugin 可以通過 compiler.hooks 訪問各種鉤子，并注冊回調函數。當 Webpack 執行到對應的生命周期階段時，會觸發這些鉤子，從而執行 Plugin 的功能。
總結
Webpack 的核心原理可歸結為模塊化、依賴分析與資源整合。通過理解其工作流程的三階段（初始化、編譯、輸出），開發者能更高效地配置優化策略，定制 Loader/Plugin 解決個性化需求。
)
