HMR全称 Hot Module Replacement,可以理解为模块热替换,指在应用程序运行过程中,替换、添加、删除模块,而无需重新刷新整个应用
使用HMR,就可以实现只将修改的模块实时替换至应用中,不必完全刷新整个应用
在webpack里配置HMR
const webpack = require('webpack')
module.exports = {
// ...
devServer: {
// 开启 HMR 特性
hot: true
// hotOnly: true
}
}
所以,HMR并不像 Webpack 的其他特性一样可以开箱即用,需要有一些额外的操作
我们需要去指定哪些模块发生更新时进行HRM,如下代码:
if(module.hot){
module.hot.accept('./util.js',()=>{
console.log("util.js更新了")
})
}
实现原理
一:
-
通过webpack-dev-server创建两个服务器:提供静态资源的服务器(express)和socket服务
-
express server负责直接提供静态资源的服务(打包后的资源直接被浏览器请求和解析)
-
scoket server是一个websocket的长连接,双方可以通信
-
当socket server监听到对应的模块发生变化时,会生成两个文件.json和.js文件
-
通过长连接,socket server可以直接将这两个文件主动发送给客户端
-
浏览器拿到两个新的文件后,通过HMR runtime机制,加载这两个文件,并且针对修改的模块进行更新
二:
1、启动webpack生成compiler实例,compiler上有很多方法,例如监听本地文件的变化
2、使用express框架启动本地server,让浏览器可以请求本地的静态资源
3、启动websocket服务,当本地文件发生变化,可以立即告知浏览器可以热更新代码
3301

被折叠的 条评论
为什么被折叠?



