清单

在使用 webpack 构建的典型应用或网站中，主要有三种类型的代码

1. 你（或你的团队）编写的源代码。
2. 你的源代码所依赖的任何第三方库或“供应商”代码。
3. 一个 webpack 运行时和清单，用于协调所有模块的交互。

本文将重点介绍这三部分中的最后一部分：运行时，特别是清单。

运行时

运行时，连同清单数据，是 webpack 在浏览器中运行模块化应用时连接所有模块所需的代码。它包含了连接模块在交互时所需的加载和解析逻辑。这包括连接已加载到浏览器的模块以及按需加载尚未加载的模块的逻辑。

清单

一旦你的应用程序以 index.html 文件的形式进入浏览器，应用程序所需的某些 bundles 和各种其他资源就必须以某种方式加载和链接。你精心布局的 /src 目录现在已被 webpack 的 optimization 打包、压缩，甚至可能被拆分成更小的块以实现按需加载。那么 webpack 如何管理所有必需模块之间的交互呢？这就是清单数据的作用……

当编译器进入、解析并映射出你的应用程序时，它会详细记录所有模块。这种数据集合被称为“清单”，运行时将使用它来解析和加载模块，一旦它们被打包并交付到浏览器。无论你选择了哪种模块语法，那些 import 或 require 语句现在都变成了指向模块标识符的 __webpack_require__ 方法。利用清单中的数据，运行时将能够找出从何处获取标识符背后的模块。

问题

现在你对 webpack 的幕后工作原理有了一些了解。“但这对我有什么影响呢？”你可能会问。大多数时候，它并没有影响。运行时将利用清单来完成其工作，一旦你的应用程序在浏览器中运行，一切都会像魔术般地正常工作。然而，如果你决定通过利用浏览器缓存来提高项目的性能，这个过程就会突然变得非常重要，需要你理解。

通过在 bundle 文件名中使用内容哈希，你可以向浏览器指示文件内容何时发生了变化，从而使缓存失效。然而，一旦你开始这样做，你就会立即注意到一些奇怪的行为。即使某些哈希值的内容明显没有变化，它们也会发生变化。这是由于运行时和清单的注入导致的，它们在每次构建时都会发生变化。

请参阅我们《输出管理》指南中关于清单的部分，了解如何提取清单，并阅读以下指南，深入了解长期缓存的复杂性。