Javascript Webpack中的热模块替换到底是什么？

我在网页上读到一篇关于热模块更换的文章。
甚至还有一种说法

我读了所有这些，但仍然不明白

我能用它做什么

它应该只用于开发而不用于生产吗

它像利弗雷罗德，但你必须自己管理它吗

WebpackDevServer是否以某种方式与LiveReload集成

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

首先，我想指出的是，热模块更换（HMR）仍然是一项实验性功能

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

文档 先决条件：

• 使用插件：
• 代码拆分：
• 网页包开发服务器：

HMR的内容并不多，但以下是链接：

• 例如：
• API:

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

它是如何工作的？ 从应用程序视图 应用程序代码要求HMR运行时检查更新。HMR运行时下载更新（异步），并告诉应用程序代码更新可用。应用程序代码要求HMR运行时应用更新。HMR运行时应用更新（同步）。应用程序代码在此过程中可能需要用户交互，也可能不需要用户交互（由您决定）

从编译器（网页包）视图 除了正常的资源外，编译器还需要发出“更新”命令，以允许从以前的版本更新到此版本。“更新”包含两个部分：

更新清单（json）

一个或多个更新块（js）

清单包含新的编译哈希和所有更新块的列表（2）

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

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

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

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

从HMR运行时视图（技术） 为模块系统运行时发出额外的代码，以跟踪模块

父级

和

子级

在管理方面，运行时支持两种方法：

check

和

apply

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

对于处于就绪状态的每个新区块请求，还将下载更新区块

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

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


我能用它做什么？
您可以在开发中使用它作为LiveReload的替代品。实际上，webpack dev服务器支持一种热模式，即在尝试重新加载整个页面之前，尝试使用HMR进行更新。您只需添加
webpack/hot/dev server
入口点，并使用
--hot
调用dev server

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

一些加载程序已经生成了可热更新的模块。e、 g.
样式加载器
可以交换样式表。你不需要做任何特别的事情

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

对

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

下面是一个小例子：

只有在“接受”模块的情况下，才能对其进行更新。因此，您需要
module.hot.accept
父级中的模块或父级的父级。。。e、 路由器是一个好地方，或者是一个子视图

如果您只想将其用于webpack dev服务器，只需添加
webpack/hot/dev server
作为入口点即可。否则，您需要一些HMR管理代码来调用
check
和
apply

观点：是什么让它如此酷？

这是LiveReload，但适用于所有模块类型
哟