webpack 术语之 module、chunk 和 bundle

Question

概念术语

• Module：提供比完整程序接触面（surface area）更小的离散功能块。精心编写的模块提供了可靠的抽象和封装界限，使得应用程序中每个模块都具有条理清楚的设计和明确的目的。

• Chunk：这是 webpack 特定的术语被用在内部来管理 building 过程。bundle 由 chunk 组成，其中有几种类型（例如，入口 chunk（entry chunk）和子 chunk（child chunk））。通常 chunk 会直接对应所输出的 bundle，但是有一些配置并不会产生一对一的关系。

• Bundle：由多个不同的模块生成，bundles 包含了早已经过加载和编译的最终源文件版本。

这些官话，看着会云里雾里吗？

通俗解释

上来先仍一张图：

• Module：对于 webpack 来说，项目源码中所有资源（包括 JS、CSS、Image、Font 等等）都属于 module 模块。可以配置指定的 Loader 去处理这些文件。
• Chunk：当使用 webpack 将我们编写的源代码进行打包时，webpack 会根据文件引用关系生成 chunk 文件，webpack 会对这些 chunk 文件进行一些操作。
• Bundle：webpack 处理完 chunk 文件之后，最终会输出 bundle 文件，这个 bundle 文件包含了经过加载和编译的最终产物。

简单总结：module、chunk 和 bundle 其实就是同一份代码在不同转换场景取的三个名称。我们编写的是 module，webpack 处理时是 chunk，最终生成供浏览器允许的是 bundle。

参考

• Webpack 概念术语
• Webpack 理解 Chunk
• webpack 中那些最易混淆的 5 个知识点