什么是Webpack中的热模块更换?

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

我已阅读所有这一切,但仍然不明白。

我能用它做什么?
它应该只用于开发而不是用于生产?
它是否像LiveReload,但你必须自己pipe理它?
WebpackDevServer以某种方式与它集成吗?

假设我想将我的CSS(一个样式表)和JS模块更新到磁盘上,而无需重新加载页面,也不需要使用LiveReload等插件。 这是什么热模块更换可以帮助我? 我需要做什么样的工作,HMR已经提供了什么?

首先我要注意的是,热模块更换(HMR)仍然是一个实验性的function。

HMR是在正在运行的应用程序中交换模块(以及添加/删除模块)的一种方式。 你基本上可以更新已更改的模块,而无需重新加载整页。

文档

Prerequirements:

  • 使用插件: http : //webpack.github.io/docs/using-plugins.html
  • 代码拆分: http : //webpack.github.io/docs/code-splitting.html
  • webpack-dev-server: http ://webpack.github.io/docs/webpack-dev-server.html

对于HMR来说并不是那么重要,但是这里是链接:

  • 例如: http : //webpack.github.io/docs/hot-module-replacement-with-webpack.html
  • API: http : //webpack.github.io/docs/hot-module-replacement.html

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

它是如何工作的?

从应用程序视图

应用程序代码要求HMR运行时检查更新。 HMR运行时会下载更新(asynchronous)并告诉应用程序代码有更新可用。 应用程序代码要求HMR运行时应用更新。 HMR运行时应用更新(同步)。 应用程序代码可能会或可能不需要在此过程中进行用户交互(您决定)。

从编译器(webpack)来看

除了正常的资源,编译器需要发出“更新”以允许从以前的版本更新到这个版本。 “更新”包含两个部分:

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

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

更新块包含此块中所有已更新模块的代码(或模块已被移除的标志)。

编译器可以确保模块和块ID在这些构build之间保持一致。 它使用“logging”json文件将它们存储在构build之间(将其存储在内存中)。

从模块视图

HMR是一个可选function,因此它只影响包含HMR代码的模块。 文档描述了模块中可用的API。 一般来说,模块开发人员编写处理程序,在更新此模块的依赖关系时调用这些处理程序。 他也可以编写一个处理程序,当这个模块被更新时被调用。

在大多数情况下,在每个模块中都不一定要写HMR代码。 如果一个模块没有HMR处理程序,那么更新会冒泡。 这意味着单个处理程序可以处理对完整模块树的更新。 如果此树中的单个模块已更新,则将重新装入完整的模块树(仅重新装入而不传送)。

从HMR运行时视图(技术)

对于模块系统运行时是附加的代码发送到跟踪模块的parentschildren

在pipe理方面,运行时支持两种方法: checkapply

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

对于就绪状态下的每个新的块请求,更新块也被下载。

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

现在所有无效的模块都被丢弃(dispose handler)并被卸载。 然后更新当前散列,并调用所有“接受”处理程序。 运行时切换回idle状态,一切正常。

生成更新块

我能用它做什么?

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

您也可以在生产中将其用作更新机制。 在这里,您需要编写自己的pipe理代码,将HMR与您的应用程序集成在一起。

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

假设我想将我的CSS(一个样式表)和JS模块更新到磁盘上,而无需重新加载页面,也不需要使用LiveReload等插件。 这是什么热模块更换可以帮助我?

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

这是一个小例子: http : //webpack.github.io/docs/hot-module-replacement-with-webpack.html

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

如果您只想将其与webpack-dev-server一起使用,只需添加webpack/hot/dev-server作为入口点。 否则你需要一些调用checkapply HMRpipe理代码。

意见:是什么让它如此酷?

  • 它是LiveReload,但是对于每个模块types。
  • 你可以在生产中使用它。
  • 更新尊重您的代码拆分,并只下载您应用使用的部分的更新。
  • 你可以使用你的应用程序的一部分,它不会影响其他模块
  • 如果HMR被禁用,则编译器将删除所有HMR代码(将其包装在if(module.hot)

注意事项

  • 这是实验性的,没有经过很好的testing。
  • 预计一些错误
  • 理论上可用于生产,但也可能提早使用它来处理严重问题
  • 模块ID需要在编译之间进行跟踪,所以你需要存储它们( records
  • 在第一次编译之后,优化器不能再优化模块ID。 对包的大小有点影响。
  • HMR运行时代码增加了包的大小。
  • 对于生产用法,需要额外的testing来testingHMR处理程序。 这可能相当困难。

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

热门模块replace是JavaScript开发中最新的技术之一,吸引了开发者的注意。 它通过在运行时用更改replace模块来减less页面刷新次数来帮助开发。

在searchHMR时,我发现了一篇文章 ,解释了互联网上的概念,你可以从这里得到它,并添加一个GIF图像,解释这个概念,没有太多的解释。

在这里它是在工作 – 注意,计时器不会重新设置为0,因为它会在页面重新加载之后,并且CSS也会更改自动刷新。 热模块更换GIF

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

它有助于实现以下目标

  • 保留完整重新加载过程中丢失的应用程序状态。

  • 只需更新已更改的内容,节省宝贵的开发时间。

  • 调整样式的速度更快 – 几乎可以与浏览器debugging器中的样式变化相提并论。

这是实现HMR的webpack指南