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

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

詞匯表

以下，羅列了整個webpack生態(tài)系統(tǒng)中常用的術(shù)語。

A

• Asset: 這個術(shù)語主要是用來描述我們通常在web應(yīng)用或者其他應(yīng)用中用到的圖片、字體文件、音視頻，以及其他類型的一些文件。這些資源通常為一個個單獨的文件，但在webpack中，我們借助style-loader或者css-loader也能進行適當(dāng)?shù)墓芾怼?/li>

B

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

C

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

D

• Dependency Graph: 只要一個文件依賴另一個文件才能有所作為，webpack把這個文件定義為依賴項。webpack會從一個入口點開始，通過遞歸的方式構(gòu)建出一個依賴關(guān)系圖，這里面包括每一個被拆分的小模塊，每一個asset。

E

• Entry Point: 入口點告訴webpack從哪里開始解析，根據(jù)構(gòu)建出來的依賴關(guān)系圖，從而知道哪些部分將會輸出為bundle。

H

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

L

• Loaders: 應(yīng)用于項目模塊源代碼的轉(zhuǎn)換，它將按需對文件進行預(yù)處理或“加載”。它類似于一個“task-runner”。

M

• Module: 相比于一個完整的項目，項目中分散的一個個功能性模塊能夠提供一個對于程序員來說更加專注的視角。一個編寫良好的模塊能夠形成一個很清晰的抽象結(jié)構(gòu)，保證之后的維護基于此能夠變得規(guī)范化和開發(fā)具有明確性。
• Module Resolution（模塊解析）: 一個模塊可以作為另一個模塊的依賴項，即在另一個模塊中通過import或者require的方式進行引入。模塊解析器是一個代碼庫，通過這個代碼庫對引入的模塊進行解析。我們可以在resolve.modules自定義設(shè)置自己的解析路徑，以更好地方便個人腳本在項目中的引入，比如如下代碼：

官方文檔中模塊解析：https://webpack.js.org/concepts/module-resolution/

O

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

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

P

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

T

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

W

• webpack: 一個高度可配置的模塊打包工具，用于現(xiàn)代JavaScript應(yīng)用程序。

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

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

可以查閱這個地址（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 definitionModule：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, barBundles: 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不用太過多說，個人對此的理解是只要是一個文件或者文件內(nèi)通過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是一個發(fā)出的chunk或一組chunk。后面這句對bundle的解釋個人沒有太過多地理解，我對bundle的理解即它是最終打包后形成的一個個拆分好的文件。

然后，該評論還指出了chunk和bundle一般是1對1的關(guān)系，實際上，它也可以是1對多的關(guān)系。

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

last（最后）
非常感謝您能閱讀完這篇文章，您的閱讀是我不斷前進的動力。如果上述內(nèi)容或許有些錯誤或者有些個人理解比較偏離實際，還望指出，謝謝！！！
對于上面所述，有什么新的觀點或發(fā)現(xiàn)有什么錯誤，希望您能指出。
最后，附上個人常逛的社交平臺：
知乎：知乎用戶
csdn：https://blog.csdn.net/YaoDeBiAn
github: yaodebian - Overview
個人目前能力有限，并沒有自主構(gòu)建一個社區(qū)的能力，如有任何問題或想法與我溝通，請通過上述某個平臺聯(lián)系我，謝謝！！！

總結(jié)

以上是生活随笔為你收集整理的webpack把源代码里面的console和debugger全部去掉_在webpack中，module、chunk和bundle到底是什么样的存在？...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。