前言

提起热更新，这个知识点又是面试常常会问起，但是与你日常开发写业务又无多少关系的一个知识点，它能够提升你的编码效率，注意是开发阶段，单位时间内，你原来只能创造1变成现在可以创造2，它并不会提升你的代码质量也不会提升你代码最终运行的效率，但是我们还是有必要去认识一下它。

热更新

首先认识热更新：

Hot Module Replacement (HMR) exchanges, adds, or removes modules while an application is running, without a full reload.

当你程序运行的时候修改modules，不需要完全刷新可以做到更新。这样做有什么好处，好处是可以保存你现在的状态，可以提升你的开发效率。可能有些小伙伴还是不是特别清楚，我们实际操作一下： 1. 我们先安装一下这两个依赖

html-webpack-plugin是为了生成页面的，webpack-dev-server是为了开启一个服务器，运行我们的应用，写一下配置文件：

这里有一个小插曲，如果你把模版的路径写成./而不是src目录开始的会报错模块找不到，遇到问题一定要学会翻阅文档，因为你用的很多依赖都是新版本的，往往配置都是不同的，很多网上的其他开发者贴的配置都已经是落后的n个版本，所以你一定要养成查阅文档的习惯。 2. 我们提前在public目录下的模版文件里写了一个表单元素：

3. 然后来到我们的入口文件index.js：

注意我红框标注的这块代码，如果你在入口文件不配置这段，热更新是不生效的！（为啥平时写vue项目不用加这句话，好奇的你阅读完此文应该去了解一些vue-loader干了啥） 然后入口文件我引入了依赖a，a.js很简单，就打印一句话：

4. 此时，我们通过命令跑起来项目:

5. 来到浏览器：

6. ok对吧，此时我们在表单里输入1234567，然后回到源码a.js将打印1改为打印7，ctrl s保存你会惊奇的发现（页面没有刷新，但是我成功打印了7，如果刷新了页面你刚才输入的1-7会消失）：

这就是热更新，在不刷新页面的情况下去更改你的模块，如果你熟悉ajax，那么你就很容易理解，页面没有刷新，但是最新的状态更新到页面上了。 为什么我没有直接上来跟你讲原理，如果你连热更新是个啥都不清楚，你甚至不知道该如何去配置热更新，何谈原理？对吧，我看了很多篇热更新的文章，直接讲原理，作者吭哧吭哧连图带思路码了很多，但是一个留言都没有！很多人甚至都被拦在了门外，怎么去研究原理，我今天这篇分享的作用就是带你从门外走进来，希望下次面试官问你的时候，你可以清晰的告诉他webpack里热更新是个啥，为啥能提升我们的开发效率！

并没有更新对吧，还是之前的代码，但是我们来到网络：

发现了我们更改后的代码，那么这一过程是怎么完成的呢？是通过webpack-dev-server内置插件webpack-dev-middleware结合websocket以及HotModuleReplacementPlugin来完成的，webpack-dev-middleware是个在node运行时的中间件，简单说下它的好处，这个中间件是将源码编译到内存中而不是写入到文件中，它主要用于检测代码的变化。websocket与客户端通信，将更改后的代码递交给HotModuleReplacementPlugin插件来处理。 至此hrm是什么、怎么用、大致的实现过程应该形成了一定认知，由此你再去深入原理等其他方面是不是会更容易些呢。

尾声

我越来越焦虑的是在中文互联网下很难搜索到有用的信息，不仅仅是开发方面，我不知道是越来越少的人不愿意分享了还是这个时代的年轻人和我们那一代人不一样了，似乎人人都奔着搞钱去了，陆续一些开源的作者也对自己开发的一些插件停着维护了，包括不限于我早些年用过的某个富文本插件，反而某些娱乐化的一些人都开始发出反问了，为什么不想想自己的原因，是自己不够努力吗？可笑的是很多努力的人并没有给到正向的反馈，可能这就是越来越多的人慢慢的不屑于去分享了，希望年轻的一代人可以扛起这个时代，作为老一辈的人尽量为你们指明前进的路。