webpack热更新

什么是模热更新？有什么优点

模块热更新是webpack的一个功能，它可以使得代码修改之后，不用刷新浏览器就可以更新。

在应用过程中替换添加删出模块，无需重新加载整个页面，是高级版的自动刷新浏览器。

优点：只更新变更内容，以节省宝贵的开发时间。调整样式更加快速，几乎相当于在浏览器中更改样式\

HMR热更新

借助webpack.HotModuleReplacementPlugin()，devServer开启hot
场景1：实现只刷新css，不影响js
场景2：js中实现热更新，只更新指定js模块

if (module.hot) {  
    module.hot.accept(’./library.js’, function() {
      // Do something with the updated library module…  
    });
}

 

webpack热更新HMR原理

1. HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？
2. webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
3. express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
4. HMR Socket Server，是一个socket的长连接：
5. 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
6. 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；
7. 通过长连接，服务端可以主动将这两个文件直接发送给客户端（浏览器）；
8. 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新；

HMR原理图

 

 

 

 

更详细可参考

https://blog.csdn.net/bigname22/article/details/127362168