289

我已经阅读了几 页关于 Webpack 中的热模块替换的内容。
甚至还有一个使用它的示例应用程序。

我已经阅读了所有这些，但仍然不明白。

我能用它做什么？

  1. 它应该只用于开发而不是生产吗？
  2. 是不是像 LiveReload 一样，但必须自己管理？
  3. WebpackDevServer 是否以某种方式与 LiveReload 集成？

假设我想在将 CSS（一个样式表）和 JS 模块保存到磁盘时更新它们，而不需要重新加载页面并且不使用 LiveReload 等插件。这是热模块更换可以帮助我吗？我需要做什么样的工作，HMR 已经提供了什么？

4

2 回答 2

472

首先，我想指出热模块更换 (HMR) 仍然是一个实验性功能。

HMR 是一种在正在运行的应用程序中交换模块（以及添加/删除模块）的方式。您基本上可以在不重新加载整个页面的情况下更新更改的模块。

文档

先决条件：

这对 HMR 来说不是很多，但这里是链接：

我会将这些答案添加到文档中。

它是如何工作的？

从应用程序视图

应用程序代码要求 HMR 运行时检查更新。HMR 运行时下载更新（异步）并告诉应用程序代码有可用的更新。应用程序代码要求 HMR 运行时应用更新。HMR 运行时应用更新（同步）。应用程序代码在此过程中可能需要也可能不需要用户交互（您决定）。

从编译器（webpack）视图

除了普通资产之外，编译器需要发出“更新”以允许从以前的版本更新到此版本。“更新”包含两部分：

  1. 更新清单 (json)
  2. 一个或多个更新块 (js)

清单包含新的编译哈希和所有更新块的列表 (2)。

更新块包含此块中所有更新模块的代码（如果模块被删除，则包含一个标志）。

编译器还确保模块和块 ID 在这些构建之间是一致的。它使用“记录” json 文件在构建之间存储它们（或者将它们存储在内存中）。

从模块视图

HMR 是一个可选功能，因此它只影响包含 HMR 代码的模块。该文档描述了模块中可用的 API。通常，模块开发人员编写在更新此模块的依赖项时调用的处理程序。他们还可以编写一个在更新此模块时调用的处理程序。

在大多数情况下，不必在每个模块中编写 HMR 代码。如果模块没有 HMR 处理程序，则更新会冒泡。这意味着单个处理程序可以处理完整模块树的更新。如果更新此树中的单个模块，则重新加载完整的模块树（仅重新加载，不传输）。

从 HMR 运行时视图（技术）

为模块系统运行时发出附加代码以跟踪模块parents和children.

在管理方面，运行时支持两种方法：check和apply.

Acheck向更新清单发出 HTTP 请求。当此请求失败时，没有可用的更新。否则，更新的块列表将与当前加载的块列表进行比较。对于每个加载的块，都会下载相应的更新块。所有模块更新都作为更新存储在运行时中。运行时切换到ready状态，这意味着更新已下载并准备好应用。

对于处于就绪状态的每个新块请求，也会下载更新块。

该apply方法将所有更新的模块标记为无效。对于每个无效模块，模块中都需要有一个更新处理程序，或者每个父模块中都需要有一个更新处理程序。否则无效会冒泡并将所有父母也标记为无效。这个过程一直持续到不再发生“冒泡”。如果它冒泡到一个入口点，则该过程将失败。

现在所有无效模块都被处理（处理处理程序）并卸载。然后更新当前哈希并调用所有“接受”处理程序。运行时切换回idle状态，一切都照常进行。

生成的更新块

我能用它做什么？

您可以在开发中使用它作为 LiveReload 的替代品。实际上 webpack-dev-server 支持热模式，它会在尝试重新加载整个页面之前尝试使用 HMR 进行更新。您只需要添加webpack/hot/dev-server入口点并使用--hot.

您还可以在生产中使用它作为更新机制。在这里，您需要编写自己的管理代码，将 HMR 与您的应用程序集成。

一些加载器已经生成了可热更新的模块。例如，style-loader可以交换样式表。你不需要做任何特别的事情。

假设我想在将 CSS（一个样式表）和 JS 模块保存到磁盘时更新它们，而不需要重新加载页面并且不使用 LiveReload 等插件。这是热模块更换可以帮助我吗？

是的

我需要做什么样的工作，HMR 已经提供了什么？

这是一个小例子：https ://webpack.js.org/guides/hot-module-replacement/

一个模块只有在你“接受”它的情况下才能被更新。所以你需要module.hot.accept在模块的父母或父母的父母... 例如路由器是一个好地方，或一个子视图。

如果您只想将它​​与 webpack-dev-server 一起使用，只需添加webpack/hot/dev-server为入口点。否则，您需要一些 HMR 管理代码来调用check和apply.

意见：是什么让它如此酷？

  • 它是 LiveReload，但适用于每种模块类型。
  • 您可以在生产中使用它。
  • 更新尊重您的代码拆分，并且仅下载应用程序使用部分的更新。
  • 您可以将它用于应用程序的一部分，并且不会影响其他模块
  • 如果 HMR 被禁用，编译器将删除所有 HMR 代码（将其包装在 中if(module.hot)）。

注意事项

  • 它是实验性的，没有经过很好的测试。
  • 期待一些错误。
  • 理论上可用于生产，但将其用于严肃的事情可能还为时过早。
  • 模块 ID 需要在编译之间进行跟踪，因此您需要存储它们 ( records)。
  • 优化器在第一次编译后无法再优化模块 ID。对捆绑包大小有一点影响。
  • HMR 运行时代码会增加包大小。
  • 对于生产使用，需要额外的测试来测试 HMR 处理程序。这可能非常困难。
于 2014-07-05T15:09:45.700 回答
21

尽管接受的答案正确地解释了一切，但以下描述应该有助于更快地理解 HMR 是什么。

本质上（简而言之！） -它通过在运行时用更改替换模块来减少页面刷新次数来帮助开发。

在搜索 HMR 时，我发现了一篇解释这个概念的文章，但它很长，所以这里是一个 GIF 图像，解释了这个概念，没有太多文字。

在这里它起作用了 - 请注意，计时器不会像页面重新加载后那样重置为 0，并且 CSS 也会更改自动刷新。 热模块更换 GIF

Webpack 有助于实现 HMR。你可以在这里找到文档

它有助于实现以下目标：

  • 在重新加载期间保留应用程序状态（如果没有 HMR，它总是会丢失）

  • 通过仅更新已更改的内容来节省宝贵的开发时间。

  • 更快地调整样式——几乎可以与在浏览器的调试器中更改样式相媲美。

这里是实现 HMR 的 webpack 指南

于 2017-09-18T06:27:42.023 回答