What are module, chunk and bundle in webpack?（在webpack中，module、chunk和bundle到底是什麼樣的存在？）

What are module, chunk and bundle in webpack?（在webpack中，module、chunk和bundle到底是什麼樣的存在呢？）相信很多人在使用webpack一段時間後仍然是一知半解。

首先，先看一下官方文檔中給出的詞彙表，以下是我對原文的翻譯，原文地址：https://webpack.js.org/glossary/

詞彙表

以下，羅列了整個webpack生態系統中常用的術語。

A

• Asset: 這個術語主要是用來描述我們通常在web應用或者其他應用中用到的圖片、字體文件、音視頻，以及其他類型的一些文件。這些資源通常爲一個個單獨的文件，但在webpack中，我們藉助style-loader或者css-loader也能進行適當的管理。

B

• Bundle: bundle通常是由多個不同的模塊產生，它是已經加載完畢和被編譯後的源代碼的最終版本。
• Bundle Splitting: 這是webpack優化代碼的一種方法，即將一個單獨的應用拆解爲多個bundle。通過將多個bundle中公共引入的模塊拆解出來，我們可以減少項目的代碼量，從而減小應用的體積，並且通過瀏覽器緩存，我們可以將代碼進一步優化。

C

• Chunk: 這個webpack中專用的術語用於管理webpack內部的打包進程。bundle由許多chunk組成，chunk有幾種類型，比如說“入口”和“子塊”。通常chunk和輸出的bundle一一對應，但是，有些是一對多的關係。
• Code Splitting: 它表示將你的代碼拆分成多個bundle或chunk，之後你可以按需加載它們，而不是簡單地加載一個單獨的文件。
• Configration: webpack的配置文件是一段非常普通的javascript代碼，它會輸出一個對象，然後webpack將會基於對象中的每個屬性開始運行。

D

• Dependency Graph: 只要一個文件依賴另一個文件纔能有所作爲，webpack把這個文件定義爲依賴項。webpack會從一個入口點開始，通過遞歸的方式構建出一個依賴關係圖，這裏麪包括每一個被拆分的小模塊，每一個asset。

E

• Entry Point: 入口點告訴webpack從哪裏開始解析，根據構建出來的依賴關係圖，從而知道哪些部分將會輸出爲bundle。

H

• Hot Module Replacement (HMR): 即熱更新，當項目在運行時發生變更、文件新增、文件刪除時，整個項目無需全部全局加載。

L

• Loaders: 應用於項目模塊源代碼的轉換，它將按需對文件進行預處理或“加載”。它類似於一個“task-runner”。

M

• Module: 相比於一個完整的項目，項目中分散的一個個功能性模塊能夠提供一個對於程序員來說更加專注的視角。一個編寫良好的模塊能夠形成一個很清晰的抽象結構，保證之後的維護基於此能夠變得規範化和開發具有明確性。
• Module Resolution（模塊解析）: 一個模塊可以作爲另一個模塊的依賴項，即在另一個模塊中通過import或者require的方式進行引入。模塊解析器是一個代碼庫，通過這個代碼庫對引入的模塊進行解析。我們可以在resolve.modules自定義設置自己的解析路徑，以更好地方便個人腳本在項目中的引入，比如如下代碼：
  
  官方文檔中模塊解析：https://webpack.js.org/concepts/module-resolution/

O

• Output: 指定輸出編譯後代碼的位置。

注意：即使指定了多個入口點（entry points），Ouput配置項也只能設置一個。

P

• Plugin: 一個具有apply屬性的javascript對象。apply屬性通過webpack編譯器被調用，以訪問整個整個編譯生命週期。這些Plugins通常以一種或另一種方式擴展webpack的編譯功能。

T

• Target: 該配置用於指定項目的運行環境（browser、nodejs、electron等），以使webpack編譯器以不同的方式進行編譯。
• TreeShaking: 消除未使用/多餘的代碼，或更準確地說，是實時代碼導入。webpack編譯器通過分析代碼中使用的import語句、引入的代碼塊的使用情況來判斷哪些依賴部分被使用，以及哪些依賴部分沒有被使用需要丟棄掉。

W

• webpack: 一個高度可配置的模塊打包工具，用於現代JavaScript應用程序。

那麼回到一開始的問題，What are module, chunk and bundle in webpack?（在webpack中，module、chunk和bundle到底是什麼樣的存在？）

通過上面的詞彙表，我們的思路稍微清晰了一些，同時也get到某些其他的術語，但是，官方的話實在是太官方了，對於我們的問題還是比較模糊，接下來繼續進行分析。

可以查閱這個地址（https://stackoverflow.com/questions/42523436/what-are-module-chunk-and-bundle-in-webpack?answertab=votes#tab-top），其中有一條評論：

After spending a day digging into this I wanted to provide what I believe is a slightly more accurate answer. The webpack team has published a useful (and tricky to notice) glossary.

I believe the confusion about chunks and bundles is that the terms can refer to the same thing, but should be used at different points in the webpack process.

webpack glossary definition

Module：Discrete chunks of functionality that provide a smaller surface area than a full program. Well-written modules provide solid abstractions and encapsulation boundaries which make up a coherent design and clear purpose.

Chunk: This webpack-specific term is used internally to manage the bundling process. Bundles are composed out of chunks, of which there are several types (e.g. entry and child). Typically, chunks directly correspond with the output bundles however, there are some configurations that don’t yield a one-to-one relationship.

Bundle: Produced from a number of distinct modules, bundles contain the final versions of source files that have already undergone the loading and compilation process.

(emphasis added by me)

Interpretation I summarize the difference as: a chunk is a group of modules within the webpack process, a bundle is an emitted chunk or set of chunks.

The distinction is useful when talking about webpack processes as they are occuring. As modules are chunked together, they can change significantly (especially during plugin processing), so it isn’t accurate to call them bundles at that point, the chunks may not even be emitted as bundles in the final output! Then after webpack is finished it is useful to have a term to refer to all of the emitted, final files (bundles).

Your example

So for your example

{
entry: {
foo: [“webpack/hot/only-dev-server.js”,"./src/foo.js"],
bar: ["./src/bar.js"]
},
output: {
path: “./dist”,
filename: “[name].js”
}
}
Modules: “webpack/hot/only-dev-server.js”, “./src/foo.js”, “./src/bar.js” ( + any other modules that are dependencies of these entry points!)
Chunks: foo, bar
Bundles: foo, bar
In your example your chunks and bundles have a 1:1 relationship, but this isn’t always the case. For example adding source maps would mean you have a 1:2 relationship between a chunk and a bundle.
Resources

webpack glossary
webpack stats data documentation
Issue 970 - Concepts - Bundle vs Chunk

module不用太過多說，個人對此的理解是只要是一個文件或者文件內通過import等方式引用的代碼塊或媒體文件，均可以認爲是一個module。

對於chunk和bundle，我們需要注意上面的兩句話：a chunk is a group of modules within the webpack process, a bundle is an emitted chunk or set of chunks. 翻譯成中文後，大致爲：一個chunk是webpack進程中的一組模塊，一個bundle是一個發出的chunk或一組chunk。後面這句對bundle的解釋個人沒有太過多地理解，我對bundle的理解即它是最終打包後形成的一個個拆分好的文件。

然後，該評論還指出了chunk和bundle一般是1對1的關係，實際上，它也可以是1對多的關係。

很好理解，假設入口點爲entry1和entry2，它們都引用了a和b模塊，打包出來的除了與entry1和entry2一一對應的entry1.bundle.js和entry2.bundle.js，還有一個default~entry1~entry2.bundle.js（包含了a和b，也就是一組chunk）。

last（最後）
非常感謝您能閱讀完這篇文章，您的閱讀是我不斷前進的動力。如果上述內容或許有些錯誤或者有些個人理解比較偏離實際，還望指出，謝謝！！！

對於上面所述，有什麼新的觀點或發現有什麼錯誤，希望您能指出。

最後，附上個人常逛的社交平臺：
知乎：https://www.zhihu.com/people/bi-an-yao-91/activities
csdn：https://blog.csdn.net/YaoDeBiAn
github: https://github.com/yaodebian

個人目前能力有限，並沒有自主構建一個社區的能力，如有任何問題或想法與我溝通，請通過上述某個平臺聯繫我，謝謝！！！