HMR- Hot Module Replacement
使用前提:项目必须是基于webpack-dev-server或webpac-dev-middle
使用方式, 如下
const webpack = require('webpack');
module.exports = {
// ...
plugins: [
new webpack.HotModuleReplacementPlugin();
],
devServer: {
hot: true
}
}
上面的配置的结果会为每个模块绑定一个module.hot对象,这个对象包含的HMR的API,借助这些API我们不仅可以实现对特定模块的开启或关闭HMR,也可以添加热替换额外的逻辑。
在每个模块内调用API的方式有两种:
- 手动在每个模块内添加
- 借助一些第三方工具:react-hot-loader、vue-loader
// 手动在index.js中添加
if(module.hot){
module.hot.replace()
}
HMR原理
在本地开发环境下,浏览器时客户端,webpack-dev-server(WDS)相当于服务端。HMR的核心就是客户端从服务端拉取更新的资源(准确的说是chunk diff)
HMR流程
上面提到客户端会向服务端拉取更新的资源,那么什么时候拉取就成了首要问题
一、确定拉取时间
WDS实际上与浏览器之间维护了一个websocket实时监听本地源文件,当本地资源发生了变化WDS向浏览器推送更新事件,并带上这次构建的hash,让客户端有上一次资源进行对比。
通过hash的比对可以防止冗余更新,因为有些时候的源文件的更改并不一定代表构建结果的更改(比如添加了一个文件末尾空行)
websocket发送事件列表如图,可以看出每个事件的数据正是上面说到的hash