清单

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

1. 您以及您的团队可能编写的源代码。
2. 您的源代码依赖的任何第三方库或“供应商”代码。
3. 进行所有模块交互的 webpack 运行时和 **清单**。

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

运行时

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

清单

当您的应用程序以 index.html 文件的形式进入浏览器时，应用程序所需的某些捆绑包和其他各种资产必须以某种方式加载和链接。您精心布置的 /src 目录现在被捆绑、缩小，甚至可能被 webpack 的 optimization 拆分成更小的块以进行延迟加载。那么 webpack 如何管理所有必需模块之间的交互呢？这就是清单数据发挥作用的地方……

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

问题

现在您对 webpack 在幕后是如何工作的有了一些了解。“但这对我有什么影响？”您可能会问。大多数情况下，它不会。运行时将完成它的工作，利用清单，一旦您的应用程序进入浏览器，一切似乎都会神奇地工作。但是，如果您决定通过利用浏览器缓存来提高项目的性能，这个过程将突然变得很重要。

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

请参阅我们 输出管理 指南的 清单部分，了解如何提取清单，并阅读以下指南，详细了解长期缓存的复杂性。