正文
概念术语
- 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。
