热更新

介绍

热更新，英文全称 Hot Module Replacement，简称 HMR

模块热替换，在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用。页面中的状态信息也还会存在

开启热更新

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

上述配置，修改保存 css 文件，能够正常 HRM

但修改 js 文件，页面会刷新，重新加载应用，不会触发 HRM，还需要额外的操作：指定哪些模块变化时 HRM

if (module.hot) {
  module.hot.accept('./util.js', () => {
    console.log("util.js更新了")
  })
}

原理

• 启动阶段：1 - 2 - 3 - 4

Webpack Compile 将源代码和 HMR Runtime 一起编译成 bundle文件，传输给Bundle Server 静态资源服务器

• 热更新阶段：1 - 2 - 5 - 6 - 7

当某一个文件或者模块发生变化时，webpack监听到文件变化对文件重新编译打包，编译生成唯一的hash值

根据变化的内容生成两个补丁文件：manifest（包含了 hash 和 chundId，用来说明变化的内容）和chunk.js 模块

HMR Server会向浏览器推送一条消息，消息包含文件改动后生成的hash值，浏览器会创建一个 ajax 去服务端请求获取到变化内容的 manifest 文件

浏览器根据 manifest 文件获取模块变化的内容，从而触发render流程，实现局部模块更新