webpack類定義？

webpack的定義：

本質(zhì)上,webpack 是一個現(xiàn)代 JavaScript 應(yīng)用程序的靜態(tài)模塊打包器(module bundler)。當(dāng) webpack 處理應(yīng)用程序時(shí),它會遞歸地構(gòu)建一個依賴關(guān)系圖(dependency graph),其中包含應(yīng)用程序需要的每個模塊,然后將所有這些模塊打包成一個或多個 bundle。

webpack 就像一條生產(chǎn)線,要經(jīng)過一系列處理流程后才能將源文件轉(zhuǎn)換成輸出結(jié)果。 這條生產(chǎn)線上的每個處理流程的職責(zé)都是單一的,多個流程之間有存在依賴關(guān)系,只有完成當(dāng)前處理后才能交給下一個流程去處理。 插件就像是一個插入到生產(chǎn)線中的一個功能,在特定的時(shí)機(jī)對生產(chǎn)線上的資源做處理。

webpack 通過 Tapable 來組織這條復(fù)雜的生產(chǎn)線。 webpack 在運(yùn)行過程中會廣播事件,插件只需要監(jiān)聽它所關(guān)心的事件,就能加入到這條生產(chǎn)線中,去改變生產(chǎn)線的運(yùn)作。 webpack 的事件流機(jī)制保證了插件的有序性,使得整個系統(tǒng)擴(kuò)展性很好。

webpack的核心概念：

Entry

入口起點(diǎn)(entry point)指示 webpack 應(yīng)該使用哪個模塊,來作為構(gòu)建其內(nèi)部依賴圖的開始。

進(jìn)入入口起點(diǎn)后,webpack 會找出有哪些模塊和庫是入口起點(diǎn)（直接和間接）依賴的。

每個依賴項(xiàng)隨即被處理,最后輸出到稱之為 bundles 的文件中。

Output

output 屬性告訴 webpack 在哪里輸出它所創(chuàng)建的 bundles,以及如何命名這些文件,默認(rèn)值為 ./dist。

基本上,整個應(yīng)用程序結(jié)構(gòu),都會被編譯到你指定的輸出路徑的文件夾中。

Module

模塊,在 Webpack 里一切皆模塊,一個模塊對應(yīng)著一個文件。Webpack 會從配置的 Entry 開始遞歸找出所有依賴的模塊

Chunk

代碼塊,一個 Chunk 由多個模塊組合而成,用于代碼合并與分割。

Loader

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

loader 可以將所有類型的文件轉(zhuǎn)換為 webpack 能夠處理的有效模塊,然后你就可以利用 webpack 的打包能力,對它們進(jìn)行處理。

本質(zhì)上,webpack loader 將所有類型的文件,轉(zhuǎn)換為應(yīng)用程序的依賴圖（和最終的 bundle）可以直接引用的模塊。

Plugin

loader 被用于轉(zhuǎn)換某些類型的模塊,而插件則可以用于執(zhí)行范圍更廣的任務(wù)。

插件的范圍包括,從打包優(yōu)化和壓縮,一直到重新定義環(huán)境中的變量。插件接口功能極其強(qiáng)大,可以用來處理各種各樣的任務(wù)。

webpack 構(gòu)建流程

Webpack 的運(yùn)行流程是一個串行的過程,從啟動到結(jié)束會依次執(zhí)行以下流程 :

初始化參數(shù)：從配置文件和 Shell 語句中讀取與合并參數(shù),得出最終的參數(shù)。

開始編譯：用上一步得到的參數(shù)初始化 Compiler 對象,加載所有配置的插件,執(zhí)行對象的 run 方法開始執(zhí)行編譯。

確定入口：根據(jù)配置中的 entry 找出所有的入口文件。

編譯模塊：從入口文件出發(fā),調(diào)用所有配置的 Loader 對模塊進(jìn)行翻譯,再找出該模塊依賴的模塊,再遞歸本步驟直到所有入口依賴的文件都經(jīng)過了本步驟的處理。

完成模塊編譯：在經(jīng)過第 4 步使用 Loader 翻譯完所有模塊后,得到了每個模塊被翻譯后的最終內(nèi)容以及它們之間的依賴關(guān)系。

輸出資源：根據(jù)入口和模塊之間的依賴關(guān)系,組裝成一個個包含多個模塊的 Chunk,再把每個 Chunk 轉(zhuǎn)換成一個單獨(dú)的文件加入到輸出列表,這步是可以修改輸出內(nèi)容的最后機(jī)會。

輸出完成：在確定好輸出內(nèi)容后,根據(jù)配置確定輸出的路徑和文件名,把文件內(nèi)容寫入到文件系統(tǒng)。

在以上過程中,Webpack 會在特定的時(shí)間點(diǎn)廣播出特定的事件,插件在監(jiān)聽到感興趣的事件后會執(zhí)行特定的邏輯,并且插件可以調(diào)用 Webpack 提供的 API 改變 Webpack 的運(yùn)行結(jié)果。