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

个人目前能力有限，并没有自主构建一个社区的能力，如有任何问题或想法与我沟通，请通过上述某个平台联系我，谢谢！！！