什么是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）来看
除了正常的资源，编译器需要发出“更新”以允许从以前的版本更新到这个版本。 “更新”包含两个部分：
- 更新清单（json）
- 一个或多个更新块（js）
清单包含新的编译哈希和所有更新块的列表（2.）。
更新块包含此块中所有已更新模块的代码（或模块已被移除的标志）。
编译器可以确保模块和块ID在这些构build之间保持一致。 它使用“logging”json文件将它们存储在构build之间（将其存储在内存中）。
从模块视图
HMR是一个可选function，因此它只影响包含HMR代码的模块。 文档描述了模块中可用的API。 一般来说，模块开发人员编写处理程序，在更新此模块的依赖关系时调用这些处理程序。 他也可以编写一个处理程序，当这个模块被更新时被调用。
在大多数情况下，在每个模块中都不一定要写HMR代码。 如果一个模块没有HMR处理程序，那么更新会冒泡。 这意味着单个处理程序可以处理对完整模块树的更新。 如果此树中的单个模块已更新，则将重新装入完整的模块树（仅重新装入而不传送）。
从HMR运行时视图（技术）
对于模块系统运行时是附加的代码发送到跟踪模块的parents和children 。
在pipe理方面，运行时支持两种方法： check和apply 。
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作为入口点。 否则你需要一些调用check和apply HMRpipe理代码。
意见：是什么让它如此酷？
- 它是LiveReload，但是对于每个模块types。
- 你可以在生产中使用它。
- 更新尊重您的代码拆分，并只下载您应用使用的部分的更新。
- 你可以使用你的应用程序的一部分，它不会影响其他模块
- 如果HMR被禁用，则编译器将删除所有HMR代码（将其包装在
if(module.hot)
注意事项
- 这是实验性的，没有经过很好的testing。
- 预计一些错误
- 理论上可用于生产，但也可能提早使用它来处理严重问题
- 模块ID需要在编译之间进行跟踪，所以你需要存储它们（
records） - 在第一次编译之后，优化器不能再优化模块ID。 对包的大小有点影响。
- HMR运行时代码增加了包的大小。
- 对于生产用法，需要额外的testing来testingHMR处理程序。 这可能相当困难。
接受的答案扩展了一切无论如何，下面的描述有助于快速了解什么是HMR。
热门模块replace是JavaScript开发中最新的技术之一，吸引了开发者的注意。 它通过在运行时用更改replace模块来减less页面刷新次数来帮助开发。
在searchHMR时，我发现了一篇文章 ，解释了互联网上的概念，你可以从这里得到它，并添加一个GIF图像，解释这个概念，没有太多的解释。
在这里它是在工作 – 注意，计时器不会重新设置为0，因为它会在页面重新加载之后，并且CSS也会更改自动刷新。 
Webpack有助于实现HMR。 你可以在这里find文档
它有助于实现以下目标
-
保留完整重新加载过程中丢失的应用程序状态。
-
只需更新已更改的内容，节省宝贵的开发时间。
-
调整样式的速度更快 – 几乎可以与浏览器debugging器中的样式变化相提并论。
这是实现HMR的webpack指南
