The Manifest

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

  1. 你或者你的团队所写的的源代码。
  2. 你的源代码所依赖的第三方库或“厂商”代码。
  3. 一个 webpack 运行时(runtime)和清单(manifest),管理所有模块的交互。

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

运行时

如上所述,我们只简要介绍一下。运行时以及清单数据基本上是 webpack 在浏览器中运行时连接模块化的应用程序的全部代码。它包含模块交互时连接模块所需的加载和解析逻辑。这包括连接已经加载到浏览器中的模块以及延迟加载尚未加载的模块的逻辑。

清单

因此,一旦你的应用程序(形如一个 index.html 文件,一些 bundle 和其他各种资源)遇到浏览器,它看起来是什么样的?你精心安排的那个 /src 目录现在已经不见了,那么 webpack 如何管理所有模块之间的交互呢?这就是清单数据由来的原因。

当编译器开始执行,解析并编译出你的应用程序时,它会保留所有模块的详细说明。这个数据集合被称为“清单”(Manifest),它是运行时在模块被打包并加载到浏览器后用来解析和加载模块用的。无论你选择哪种 模块语法,那些 importrequire 语句现在都变成指向模块标识符的 __webpack_require__ 方法。通过清单中的数据,运行时将能够找出去何处检索标识符后面模块。

问题

所以现在你对 webpack 如何在幕后工作有一点点的了解。“但是,这对我有什么影响?”,你可能会问。简单的答案是,大部分时候没有。运行时会利用清单来做它的事情,一旦你的应用程序碰到浏览器,所有东西都会显示出神奇的效果。但是,如果你决定利用浏览器缓存来提高项目性能,那么这个过程将一下子就变得重要起来。

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

请参阅我们的 管理构建文件 指南的 清单部分 ,以了解如何提取清单,并阅读下面的指南以了解有关长期缓存复杂性的详细信息。

进一步阅读