【webpack】HRM模块热替换原理

原理

1.打包的时候源代码会经过webpack compiler编译成bundle.js文件。当我们在浏览器中访问例如http://localhost:8080，会通过http向服务器请求并加载静态资源如html、css、js文件，并在浏览器中渲染出对应的内容，http是短连接，客户端即浏览器向express服务器请求连接，客户端与服务器间建立连接，服务器向客户端响应结果，最终断开连接，至此，首屏渲染完成。

2.express服务器通过Socket与浏览器之间建立长连接，可以相互推送数据。我们的源代码中某一个文件进行了更新，webpack-compiler会将变化记录在json与js文件中，这时候，向浏览器主动推送数据，浏览器只会修改更新的文件，而不是webpack把所有文件重新打包，服务器给浏览器提供一个信号，让浏览器重新请求加载所有静态资源。至此，模块热替换完成。

总结

webpack-dev-server会创建2个服务：静态资源服务（express）、Socket服务（net.Socket）

express server提供静态资源服务

socket server提供可以互相通信的长连接，当服务器监听到文件发送变化，会生成.json（manifest文件）和.js（update chunk文件），将这两个文件推送给浏览器，浏览器根据热更新机制加载这两个文件，并针对修改的模块进行更新。

参考链接：深入Webpack5等构建工具(gulp/rollup/vite)-学习视频教程-腾讯课堂 (qq.com)