webpack類定義？

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 的運行結果。