⚡ 30 秒速记

• 改文件 → 增量构建 → 通知浏览器有更新
• 客户端拿更新清单和模块补丁，再尝试应用
• accept 决定更新边界，dispose 清理旧副作用
• 状态保留依赖框架集成，不是换模块就自动成功
• 更新无法被接收时，可能退回整页刷新

热更新是在页面继续运行的情况下，替换发生变化的模块。 开发服务器监听文件变化，编译后通知客户端；客户端拉取补丁，沿模块依赖关系寻找能够接收更新的位置，再清理和替换旧模块。组件状态能否留下，要看框架的更新机制和组件变化类型。没有合适的接收边界、模块执行失败或者副作用没清干净，都可能导致刷新或异常。

版本校准： 旧文中的 webpack 4、JSONP 更新清单或 react-hot-loader 代码用于解释历史链路，不应直接复制到新项目。当前 webpack-dev-server 4+ 默认启用 HMR，严格 ESM 可使用 import.meta.webpackHot；生产环境不得携带 HMR runtime。以 webpack HMR 官方指南 和项目锁定版本为准。

Hot Module Replacement（以下简称 HMR）是 webpack 发展至今引入的最令人兴奋的特性之一 ，当你对代码进行修改并保存后，webpack 将对代码重新打包，并将新的模块发送到浏览器端，浏览器通过新的模块替换老的模块，这样在不刷新浏览器的前提下就能够对应用进行更新。

基本实现原理大致这样的，构建 bundle 的时候，加入一段 HMR runtime 的 js 和一段和服务沟通的 js 。文件修改会触发 webpack 重新构建，服务器通过向浏览器发送更新消息，浏览器通过 jsonp 拉取更新的模块文件，jsonp 回调触发模块热替换逻辑

热更新配置

使用webpack-dev-server,设置 hot 属性为 true.写模块时，按照以下写法:

if (module.hot) { //判断是否有热加载
    module.hot.accept('./hmrTest.js', function() { //热加载的模块路径
        console.log('Accepting the updated printMe module!'); //热加载的回调，即发生了模块更新时，执行什么 callback
        printMe();
    })
}

• 缺点：更新逻辑得自己写。比如要使页面显示的内容生效，需要在回调中写入document.append(xxx)

react 的热加载，使用 react-hot-loader

import { hot } from'react-hot-loader';
    const Record = ()=>{
        ...
    }
    exportdefault hot(module)(Record);
或

    if (module.hot) {
        module.hot.accept('./App', function () {
            var NextApp = require('./App')
            ReactDOM.render(<NextApp />, rootEl)
        })
    }