其他分享
首页 > 其他分享> > webpack(六)之HMR

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