阿智19832021-05-01 15:21:44

webpack的定義：

本質上，webpack 是一個現代 JavaScript 應用程式的靜態模組打包器（module bundler）。當 webpack 處理應用程式時，它會遞迴地構建一個依賴關係圖（dependency graph），其中包含應用程式需要的每個模組，然後將所有這些模組打包成一個或多個 bundle。

webpack 就像一條生產線，要經過一系列處理流程後才能將原始檔轉換成輸出結果。 這條生產線上的每個處理流程的職責都是單一的，多個流程之間有存在依賴關係，只有完成當前處理後才能交給下一個流程去處理。 外掛就像是一個插入到生產線中的一個功能，在特定的時機對生產線上的資源做處理。

webpack 透過 Tapable 來組織這條複雜的生產線。 webpack 在執行過程中會廣播事件，外掛只需要監聽它所關心的事件，就能加入到這條生產線中，去改變生產線的運作。 webpack 的事件流機制保證了外掛的有序性，使得整個系統擴充套件性很好。

webpack的核心概念：

Entry

入口起點（entry point）指示 webpack 應該使用哪個模組，來作為構建其內部依賴圖的開始。

進入入口起點後，webpack 會找出有哪些模組和庫是入口起點（直接和間接）依賴的。

每個依賴項隨即被處理，最後輸出到稱之為 bundles 的檔案中。

Output

output 屬性告訴 webpack 在哪裡輸出它所建立的 bundles，以及如何命名這些檔案，預設值為 。/dist。

基本上，整個應用程式結構，都會被編譯到你指定的輸出路徑的資料夾中。

Module

模組，在 Webpack 裡一切皆模組，一個模組對應著一個檔案。Webpack 會從配置的 Entry 開始遞迴找出所有依賴的模組

Chunk

程式碼塊，一個 Chunk 由多個模組組合而成，用於程式碼合併與分割。

Loader

loader 讓 webpack 能夠去處理那些非 JavaScript 檔案（webpack 自身只理解 JavaScript）。

loader 可以將所有型別的檔案轉換為 webpack 能夠處理的有效模組，然後你就可以利用 webpack 的打包能力，對它們進行處理。

本質上，webpack loader 將所有型別的檔案，轉換為應用程式的依賴圖（和最終的 bundle）可以直接引用的模組。

Plugin

loader 被用於轉換某些型別的模組，而外掛則可以用於執行範圍更廣的任務。

外掛的範圍包括，從打包最佳化和壓縮，一直到重新定義環境中的變數。外掛介面功能極其強大，可以用來處理各種各樣的任務。

webpack 構建流程

Webpack 的執行流程是一個序列的過程，從啟動到結束會依次執行以下流程 ：

初始化引數：從配置檔案和 Shell 語句中讀取與合併引數，得出最終的引數。

開始編譯：用上一步得到的引數初始化 Compiler 物件，載入所有配置的外掛，執行物件的 run 方法開始執行編譯。

確定入口：根據配置中的 entry 找出所有的入口檔案。

編譯模組：從入口檔案出發，呼叫所有配置的 Loader 對模組進行翻譯，再找出該模組依賴的模組，再遞迴本步驟直到所有入口依賴的檔案都經過了本步驟的處理。

完成模組編譯：在經過第 4 步使用 Loader 翻譯完所有模組後，得到了每個模組被翻譯後的最終內容以及它們之間的依賴關係。

輸出資源：根據入口和模組之間的依賴關係，組裝成一個個包含多個模組的 Chunk，再把每個 Chunk 轉換成一個單獨的檔案加入到輸出列表，這步是可以修改輸出內容的最後機會。

輸出完成：在確定好輸出內容後，根據配置確定輸出的路徑和檔名，把檔案內容寫入到檔案系統。

在以上過程中，Webpack 會在特定的時間點廣播出特定的事件，外掛在監聽到感興趣的事件後會執行特定的邏輯，並且外掛可以呼叫 Webpack 提供的 API 改變 Webpack 的執行結果。