问什么是WebPack中的热模块替换？

EN

首先，我想指出，热模块替换(HMR)仍然是一个实验性的特点。

HMR是一种在运行中的应用程序中交换模块的方法(以及添加/删除模块)。基本上可以更新已更改的模块，而不需要重新加载整个页面。

文献资料

预录：

• 使用插件代码分裂
• webpack-dev-server

这不太适合HMR，但以下是链接：

• 例子
• API

它是如何工作的？

从应用程序视图

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

来自编译器(Webpack)视图

除了正常的资产外，编译器还需要发出“更新”，以允许从以前的版本更新到此版本。“最新情况”包括两部分：

1. 更新清单(Json)
2. 一个或多个更新块(Js)

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

更新块包含此块中所有更新模块的代码(如果删除了模块，则为标志)。

编译器额外地确保模块和块ID在这些构建之间保持一致。它使用一个“记录”json文件在构建之间存储它们(在上面将它们存储在内存中)。

从模块视图

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

在大多数情况下，在每个模块中编写HMR代码并不是强制性的。如果模块没有HMR处理程序，则更新会弹出。这意味着一个处理程序可以处理完整模块树的更新。如果更新此树中的单个模块，则重新加载完整的模块树(仅重新加载，而不是传输)。

从HMR运行时视图

对于模块，系统运行时是发送到跟踪模块的附加代码。parents和children.

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

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

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

apply方法将所有更新的模块标记为无效。对于每个无效模块，需要在模块中设置一个更新处理程序，或者在每个父模块中都有一个更新处理程序。否则，那些无效的佛像也会把所有的父母都标记为无效的。这一过程一直持续到不再出现“泡沫”。如果它从一个入口点冒出来，进程就会失败。

现在，所有无效模块都被释放(Dispose处理程序)并卸载。调用所有“接受”处理程序。运行时切换回idle一切照常进行。

​

​

我能用它来做什么？

可以在开发中使用它作为LiveReload替代。实际上，webpack-dev服务器支持一种热模式，在尝试重新加载整个页面之前尝试使用hmr进行更新。只需添加webpack/hot/dev-server入口点，并使用以下命令调用dev-server--hot.

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

一些加载器已经生成了可热更新的模块。I.E.style-loader可以交换样式表。你不需要做什么特别的事。

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

是

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

下面是一个小小的例子：

模块只有在“接受”时才能更新。所以你需要module.hot.accept父母或父母的父母。也就是说，路由器是一个很好的地方或一个俯瞰。

如果只想将它与webpack-dev服务器一起使用，只需添加webpack/hot/dev-server作为切入点。否则，需要一些hmr管理代码调用check和apply.

意见：是什么让它这么酷？

• It's LiveReload but for every module kind.
• 你可以在生产中使用它。
• 这些更新尊重您的代码拆分，并且只下载应用程序中使用过的部分的更新。
• 可以将其用于应用程序的一部分，并且不影响其他模块
• 如果禁用hmr，则编译器将删除所有hmr代码(将其包装在if(module.hot)

警告

• 它是实验性的，测试得不太好。
• 期望有一些错误
• 理论上可以在生产中使用，但它可能会早期使用它来做一些严重的事情。
• 需要在编译之间跟踪模块ID，因此需要存储它们(records)
• 优化器不能在第一次编译后再优化模块ID。对束大小有一点影响。
• HMR运行时代码增加包大小。
• 对于生产使用，需要额外的测试来测试HMR处理程序。这可能会很困难。

接受的答案扩展了一切正确的无论如何，以下的描述有助于理解什么是HMR快速。

热模块替换是javascript开发中引起开发人员关注的最新技术之一。它通过在运行时用更改替换模块来减少页面刷新的次数。

在这里，它是在工作-注意，计时器没有重置为0，因为它将在页面重新加载，CSS也改变自动刷新。

​

WebPack有助于提高HMR的水平。它有助于实现以下目标：

• 保留在完全重新加载过程中丢失的应用程序状态。
• 只更新已更改的内容，可以节省宝贵的开发时间。
• 更快地调整样式--几乎可以与浏览器调试器中的更改样式相媲美。