学习了coderwhy的vue3+ts视频课的笔记
1. 认识模块热替换（HMR）
- 什么是HMR呢？
- HMR的全称是Hot Module Replacement，翻译为模块热替换；
- 模块热替换是指在 应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个页面。
- HMR通过如下几种方式，来提高开发的速度：
- 不重新加载整个页面，这样可以保留某些应用程序的状态不丢失；
- 只更新需要变化的内容，节省开发的时间；
- 修改了css、js源代码，会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式。
2. HMR的原理
- 那么HMR的原理是什么呢？如何可以做到只更新一个模块中的内容呢？
- webpack-dev-server会创建两个服务：提供静态资源的服务（express）和Socket服务（net.Socket）；
- express server负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）。
- HMR Socket Server，是一个socket的长连接：
- 长连接有一个最好的好处是建立连接后双方可以通信（服务器可以直接发送文件到客户端）；
- 当服务器监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）；
- 通过长连接，可以直接将这两个文件主动发送给客户端（浏览器）；
- 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新。
- HMR的原理图
注意：
- webpack-dev-server（搭建开发服务器）在编译之后不会写入到任何输出文件（在开发阶段可以提高效率），而是将文件 bundle 保留在内存中：
- 事实上webpack-dev-server使用了一个库叫memfs。
- 默认情况下，webpack-dev-server已经支持HMR，我们只需要开启即可。
