webpack(六)之HMR

模块热替换(HMR)

模块热替换是指在应用程序运行过程中，替换，添加，删除模块，而无需刷新整个页面。

 

HMR通过如下几种方式来提高开发效率：

1.不重新加载页面，保证某些应用状态不会丢失

2.只更新变化的内容，提高开发效率

3.修改css,js代码会立即在浏览器更新，相当于直接在浏览器的devtools中直接修改样式

 

使用HMR

1.配置webpack-dev-server

devServer: {
    hot : true
}

2.指定哪个模块使用模块热更新

module.hot.accept(依赖，回调函数)

在 vue 和 react 中，使用vue-loader已经支持vue 组件的HMR，react 使用的 react hot loader实时调整react组件 (目前已更改为react-refresh)

 

react-refresh实现热更新

1. 安装react-refresh-webpack-plugin插件

2. 配置插件

const ReactRreshWebpackPlugin = require(xxxxxx)

new ReactRreshWebpackPlugin()

3. 将插件设置到babel的plugin中

 

HMR热更新原理

webpack-dev-server创建两个服务：提供静态资源服务和socket服务

express server负责直接提供静态资源服务

HMR Socket Server 是一个长连接，建立连接后双方可以通信，当服务器监听到对应模块改变时，会产生两个文件.json文件(manifset) 和 .js文件(unpdate chunk)，通过长连接，可以直接将这两个文件主动发送给客户端，浏览器拿到这两个新文件后，通过HMR runtime机制加载这两个文件，并且针对修改的模块进行更新

标签：插件,HMR,react,webpack,更新,模块
来源： https://www.cnblogs.com/czx7020866/p/15029754.html