写代码最烦什么？改一行代码就得重新启动服务，等个十几秒才能看到效果。尤其是做前端开发的时候，刷新页面、加载资源，一套流程走下来，一杯咖啡都凉了，效率直接打对折。
热更新是啥？
简单说，热更新（Hot Module Replacement，简称 HMR）就是你在改了代码之后，浏览器不用刷新整个页面，只替换你修改的那一小块模块。比如你改了个按钮颜色，页面上这个按钮立刻变色，其他内容纹丝不动。
这感觉就像修车不用拆发动机，拧个螺丝就搞定，省时又顺手。
怎么在项目里配热更新？
以 Webpack 为例，它原生支持 HMR。先确保你用的是开发模式：
"scripts": {
"dev": "webpack serve --mode=development"
}然后在 webpack.config.js 里启用热更新：
module.exports = {
devServer: {
hot: true,
open: true
}
};这样启动后，你改任何模块，只要它支持 HMR，页面就会局部更新。
React 项目怎么配？
如果你用 React，可以装 react-refresh-webpack-plugin，让函数组件也能热更新。
npm install -D @pmmmwh/react-refresh-webpack-plugin react-refresh配置文件加上插件：
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin');
module.exports = {
plugins: [
new ReactRefreshWebpackPlugin()
],
module: {
rules: [
{
test: \/\.js$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
plugins: ['react-refresh/babel']
}
}
]
}
]
}
};配完之后，哪怕你改了个状态初始化的逻辑，组件也能保留当前状态直接更新，不用重走一遍操作流程。
Vue 用户呢？
Vue CLI 创建的项目默认就开了热更新。你运行 npm run serve 的时候，背后启动的就是 webpack-dev-server，保存文件自动更新，连配置都不用动。
自己搭 Vue + Vite 的话更简单，Vite 天生支持极速 HMR，改完代码基本是秒响应，连等待都感觉不到。
别忘了 Node 后端也能热更新
前端能热更新，后端就不能享受？当然能。用 nodemon 监听文件变化，自动重启服务：
npm install -g nodemon然后把启动命令换成：
nodemon server.js你改个路由或者接口逻辑，保存后自动重启，调试效率翻倍。
有些框架比如 NestJS，配合 nest start --watch 也能实现类似效果，根本不用手动敲命令。
遇到热更新不生效？检查这些点
有时候改了代码没反应，可能是这几个原因：
- 文件没被 webpack 正确监听 —— 检查 entry 入口和 loader 配置
- HMR 被禁用了 —— 确保 devServer.hot 是 true
- 模块不支持热更新 —— 加个判断兜底：
if (module.hot) {
module.hot.accept('./component', () => {
console.log('组件已更新');
});
}这样即使不支持，也不会报错。
热更新不是魔法，但它让写代码的过程变得更流畅。就像电动车比手动挡省力，你专注在解决问题本身，而不是重复操作上。