2023-5-22 webpack（react-refresh-webpack-plugin和react-refresh插件使用,和HMR热更新原理）

安装react-refresh-webpack-plugin和react-refresh

注: 使用这个插件必须mode为development

react-refresh-webpack-plugin和react-refresh让每次更改组件内容，浏览器不用重新刷新即可更新页面内容(热更新)

Webpack HMR的工作原理，它通过以下几个步骤实现：

1. 在运行时，Webpack将监听特定的文件更改事件。
2. 当文件更改时，Webpack会编译新的模块，并将其发送给客户端。(WebSocket方式)
3. 客户端将在运行时接收到新的模块，并替换旧的模块，从而实现更新。