目录
- 引子
- Dependency Graph
- Runtime
- Manifest
- Module、Bundle、Chunk
- Bundle Splitting
- Code Splitting
- Tree Shaking
- Output Filename
- 参考资料
引子
打包工具有多种，实际中 webpack 接触的比较多，目前中文文档跟英文文档有些对不上，其中有些概念比较分散，对此进行集中的整理。
Dependency Graph
任何时候，一个文件依赖于另一个文件，webpack 把这种情况视为依赖关系。这让 webpack 可以接受非代码资源，例如图片或字体，并且可以将它们作为依赖提供给你的应用程序。
当 webpack 处理你的程序时，可能是从命令行或配置文件中定义的一系列模块开始。从入口文件开始，webpack 递归地构建一个依赖图（Dependency Graph），这个依赖图包含着应用程序所需的每个模块，并生成一个或多个 bundle ，可由浏览器加载。
Runtime
runtime和manifest数据，基本上是在浏览器运行时，webpack 用来连接模块化应用程序所需的所有代码。- 它包含在模块交互时连接它们所需的加载和解析逻辑。这包括连接已经加载到浏览器中的模块，以及延迟加载尚未加载的模块的逻辑。
Manifest
manifest作为名词时，中文意思是：(船或飞机的)货单，旅客名单- 当编译器进入、解析和映射你的应用程序时，它会在你的所有模块上保留详细的信息，这个数据集合称为“
manifest”。 - 当完成打包并发送到浏览器时，
runtime会通过manifest来解析和加载模块。 - 无论你选择哪种模块语法，那些
import或require语句现在都已经转换为__webpack_require__方法，此方法指向模块标识符(module identifier)。
Module、Bundle、Chunk
Module
- 比完整程序更小的接触面的分离的块（chunk）功能，使得验证、调试、测试轻而易举。
- 精心编写的模块提供了可靠的抽象和封装边界，构成了连贯的设计和清晰易懂的目的。
Bundle
- 作为名词时，意思是：(一)捆，包，扎。
- 从多个不同的模块产生，包含已经加载和编译过程的源文件的最终版本。
- 个人理解就是一些相关联的包打包成的一个文件。
Chunk
- 作为名词时，意思是：块，组块，话语组成部分。
- 这个 webpack 中特定术语在内部用于管理打包过程。
bundles由chunks组成，其中有多种类型（例如入口）。- 通常，
chunks与输出bundles直接对应，但是，有些配置不产生一对一关系。
Bundle Splitting
- 这个过程提供了一种优化构建的方法，允许 webpack 为单个应用生成多个
bundle。 - 它可以将每个包的更改隔离开来，而不影响其它包。
- 这样利用浏览器的缓存，可以减少需要重新发布和客户端下载的代码量。
Code Splitting
指将代码分成不同的 bundles/chunks ，然后可以按需加载，而不是加载包含所有内容的单个 bundles 。
Tree Shaking
- 消除多余和未使用的代码。
- webpack 通过分析各种导入语句和导入代码的使用，以确定实际使用的依赖项，删除不属于“tree”的一部分。
Output Filename
webpack 提供了一种使用称为 substitution (可替换模板字符串) 的方式，通过带括号字符串来模板化文件名。
| 模版 | 描述 |
|---|---|
| [hash] | 模块标识符的 hash。修改一个模块，其它模块生成的 hash 都会变。 |
| [contenthash] | 文件内容的 hash，每个都不相同。只有改变了内容的文件的 hash 才会变。 |
| [chunkhash] | chunk 内容的 hash。一个文件改变，其关联的文件 hash 也会变。 |
| [name] | 模块的名称 |
| [id] | 模块标识符 |
| [query] | 模块的 query，例如文件名 ? 后面的字符串 |
| [function] | 返回文件名称的方法 |