Webpack 一些概念

引子

打包工具備多種，實際中 webpack 接觸的比較多，目前中文文檔跟英文文檔有些對不上，其中有些概念比較分散，對此進行集中的整理。

• Origin
• My GitHub

Dependency Graph

任什麼時候候，一個文件依賴於另外一個文件，webpack 把這種狀況視爲依賴關係。這讓 webpack 能夠接受非代碼資源，例如圖片或字體，而且能夠將它們做爲依賴提供給你的應用程序。

當 webpack 處理你的程序時，多是從命令行或配置文件中定義的一系列模塊開始。從入口文件開始，webpack 遞歸地構建一個依賴圖（Dependency Graph），這個依賴圖包含着應用程序所需的每一個模塊，並生成一個或多個 bundle ，可由瀏覽器加載。

Runtime

• runtime 和 manifest 數據，基本上是在瀏覽器運行時，webpack 用來鏈接模塊化應用程序所需的全部代碼。
• 它包含在模塊交互時鏈接它們所需的加載和解析邏輯。這包括鏈接已經加載到瀏覽器中的模塊，以及延遲加載還沒有加載的模塊的邏輯。

Manifest

• manifest 做爲名詞時，中文意思是：(船或飛機的)貨單，旅客名單
• 當編譯器進入、解析和映射你的應用程序時，它會在你的全部模塊上保留詳細的信息，這個數據集合稱爲「manifest」。
• 當完成打包併發送到瀏覽器時，runtime 會經過 manifest 來解析和加載模塊。
• 不管你選擇哪一種模塊語法，那些 import 或 require 語句如今都已經轉換爲 __webpack_require__ 方法，此方法指向模塊標識符(module identifier)。

Module、Bundle、Chunk

Module

• 比完整程序更小的接觸面的分離的塊（chunk）功能，使得驗證、調試、測試垂手可得。
• 精心編寫的模塊提供了可靠的抽象和封裝邊界，構成了連貫的設計和清晰易懂的目的。

Bundle

• 做爲名詞時，意思是：(一)捆，包，扎。
• 從多個不一樣的模塊產生，包含已經加載和編譯過程的源文件的最終版本。
• 我的理解就是一些相關聯的包打包成的一個文件。

Chunk

• 做爲名詞時，意思是：塊，組塊，話語組成部分。
• 這個 webpack 中特定術語在內部用於管理打包過程。
• bundles 由 chunks 組成，其中有多種類型（例如入口）。
• 一般，chunks 與輸出 bundles 直接對應，可是，有些配置不產生一對一關係。

Bundle Splitting

• 這個過程提供了一種優化構建的方法，容許 webpack 爲單個應用生成多個 bundle 。
• 它能夠將每一個包的更改隔離開來，而不影響其它包。
• 這樣利用瀏覽器的緩存，能夠減小須要從新發布和客戶端下載的代碼量。

Code Splitting

指將代碼分紅不一樣的 bundles/chunks ，而後能夠按需加載，而不是加載包含全部內容的單個 bundles 。

Tree Shaking

• 消除多餘和未使用的代碼。
• webpack 經過分析各類導入語句和導入代碼的使用，以肯定實際使用的依賴項，刪除不屬於「tree」的一部分。

Output Filename

webpack 提供了一種使用稱爲 substitution (可替換模板字符串) 的方式，經過帶括號字符串來模板化文件名。

模版	描述
[hash]	模塊標識符的 hash。修改一個模塊，其它模塊生成的 hash 都會變。
[contenthash]	文件內容的 hash，每一個都不相同。只有改變了內容的文件的 hash 纔會變。
[chunkhash]	chunk 內容的 hash。一個文件改變，其關聯的文件 hash 也會變。
[name]	模塊的名稱
[id]	模塊標識符
[query]	模塊的 query，例如文件名 ? 後面的字符串
[function]	返回文件名稱的方法

參考資料

• Webpack
• Webpack Glossary
• What are module, chunk and bundle in webpack?