是什么

HMR: Hot Module Replacement,模块热替换，无需刷新整个应用

怎么用

• webpack开启

const webpack = require('webpack')
module.exports = {
  // ...
  devServer: {
    // 开启 HMR 特性
    hot: true
    // hotOnly: true
  }
}

原理

启动阶段

代码编辑 ---> webpack Compiler 将js源代码和HMR Runtime一起编译成bundle.js---> 传输给Bundle Server服务器

更新阶段

• 当某一个文件或者模块变化时， webpack监听到文件变化， 对文件重新编译打包，编译生成唯一的hash值，作为下一次热更新的标识
• 变化内容生成2个补丁文件manifest（hash，chunkId）和chunk.js模块
• socket服务器会向浏览器推送一条消息， 包含文件改动后生成的hash值（h属性），
• 浏览器会创建一个ajax付服务器获取对应hash的manifest文件，触发render流程，实现局部更新

总结

• webpack-dev-server创建2个服务器 express和socket
• exprees负责静态资源
• socket 负责长连接通信
• socket监听到模块变化， 生成.json（manifest）和.js(update chunk)文件
• 通过长连接主动推送到客户端
• 浏览器拿到新文件后，通过HMR runtime机制， 加载这2个文件，并更新

FAQ