python热更新机制的实现_Webpack 热更新机制

想必作为前端大佬的你，工作中应该用过 webpack，并且对热更新的特性也有了解。如果没有，当然也没关系。

下面我要讲的，是我对 Webpack 热更新机制的一些认识和理解，不足之处，欢迎指正。

首先：

热更新是啥？

热更新，是指 Hot Module Replacement，缩写为 HMR。

从名字上解读，就是把“热”的模块进行替换。热，是指这个模块已经在运行中。

不知道你有没有听过或看过这样一段话：“在高速公路上将汽车引擎换成波音747飞机引擎”。

虽然有点牵强，但是放在这里，从某些角度上来说，也还算合适吧。

再扯远一点，说下我目前工作中的遇到的情况，相信很多人也遇到过。

微信小程序的开发工具，没有提供类似 Webpack 热更新的机制，所以在本地开发时，每次修改了代码，预览页面都会刷新，于是之前的路由跳转状态、表单中填入的数据，都没了。

哪怕只是一个文案或属性配置的修改，都会导致刷新，而要重新进入特定页面和状态，有时候很麻烦。对于开发时需要频繁修改代码的情况，这样比较浪费时间。

而如果有类似 Webpack 热更新的机制存在，则是修改了代码，不会导致刷新，而是保留现有的数据状态，只将模块进行更新替换。也就是说，既保留了现有的数据状态，又能看到代码修改后的变化。

很美好，但是想想就觉得是一件肯定不简单的事情。

所以，热更新是啥呢？

引用官方文档，热更新是：

使得应用在运行状态下，不重载刷新就能更新、增加、移除模块的机制

热更新解决的问题

那么热更新要解决的问题，在上面也解释了。用我的话来阐述，就是 在应用程序的开发环境，方便开发人员在不刷新页面的情况下，就能修改代码，并且直观地在页面上看到变化的机制。

简单来说，就是为了 提升开发效率。

联想到我在微信小程序上的开发体验，真心觉得如果有热更新机制的话，开发效率要高很多。

如果你知道微信小程序已经或计划支持热更新，或者有大佬已经做了类似的工作，欢迎告诉我，感谢！

进一步介绍前，我们来看下 Webpack 热更新如何配置。

热更新配置

如果你之前做的项目是其他人搭建配置了 Webpack 和热更新，那么这里可以了解下热更新是怎么配置的。

我的示例采用 Webpack 4，想直接看代码的话，在这里：

除了 Webpack，还需要 webpack-dev-server(或 webpack-dev-middleware)。