【Webpack】HMR 热更新和 Live-Reload 自动刷新

概述

HMR全称Hot Module Replacement，可以理解为模块热替换，指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。

不使用热更新，我们在应用运行过程中修改了某个模块，通过自动刷新会导致整个应用的整体刷新，那页面中的状态信息都会；如果使用的是HMR，就可以实现只将修改的模块实时替换至应用中，只会重新编译修改的代码，将新的模块发送到客户端，替换掉旧的模块，不必完全刷新整个应用。

实现 HMR 的关键是在客户端和服务器端之间建⽴⼀个 WebSocket 连接，当代码发⽣变化
时，服务器端会将新的模块发送给客户端，客户端接收到新的模块后会⽤新模块替换旧模块，从⽽实现实时更新。

 const webpack = require('webpack')
 module.exports = {
	 // ...
	 devServer: {
		 //  HMR 
		hot: true
		 // hotOnly: true
	 }
 }

具体来说，webpack HMR 主要分为以下⼏个步骤：

1. webpack-dev-server 将打包输出 bundle 。
2. 每当文件发生变更时，webpack 将会重新编译，webpack-dev-server 将会监控到此时文件变更事件，并找到其对应的 module。
3. webpack-dev-server 将会把变更模块通知到浏览器端，此时使用 websocket 与浏览器进行交流。
4. 浏览器根据 websocket 接收到 hash，并通过 hash 以 JSONP 的方式请求更新模块的 chunk。
5. 浏览器加载 chunk，并使用新的模块对旧模块进行热替换，并删除其缓存。

原理：

• 通过webpack-dev-server创建两个服务器：提供静态资源的服务（express）和Socket服务
• express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
• socket server 是一个 websocket 的长连接，双方可以通信
• 当 socket server 监听到对应的模块发生变化时，会生成两个文件.json（manifest文件）和.js文件（update chunk）
• 通过长连接，socket server 可以直接将这两个文件主动发送给客户端（浏览器）
• 浏览器拿到两个新的文件后，通过HMR runtime机制，加载这两个文件，并且针对修改的模块进行更新

Live-Reload 自动刷新与 HMR 热模块替换的区别

1）Live-Reload 自动刷新：当文件发生变化时，整个页面会自动刷新。这种方式比较简单直接，但缺点是每次刷新都会丢失页面中的状态和数据。

Live-Reload，通常需要一个辅助工具来监控文件变化，如 Webpack-dev-server，这些工具会为在文件变动时自动刷新浏览器。

不过，在开发环境，可以将 HMR 作为 LiveReload 的替代。webpack-dev-server 支持 hot 模式，在试图重新加载整个页面之前，hot 模式会尝试使用 HMR 来更新。

Live-Reload适用于简单项目，或初期的快速查看效果。

2）HMR 热模块替换：它通过 Webpack 等工具实现，当文件发生变化时，只替换变化的模块，不会刷新整个页面，从而保留了页面的状态，而且避免页面白屏。这个方式适用于局部更新，例如修改样式或部分 JavaScript 逻辑时。

可以通过特定的 API module.hot.accept 方法，在模块变化时，通知浏览器仅重新加载变化的模块。

HMR 功能需要在 Webpack 配置文件中进行配置，如在 devServer 中加上 hot: true 选项。

HMR更适合复杂应用，特别是单页应用（SPA）或需要频繁调试的场景。