Webpack热更新后模块生效的完整过程

大家好，我是有一点想法的thinkmars，最近在学习前端构建工具的底层原理，记下了一些笔记，想跟大家分享，欢迎一起学习~

---

我有个疑问，在使用webpack的前端项目中，修改文件后，热更新会替换模块使得新代码生效，但是是如何生效的呢？是不是得执行一下代码？带着问题，我们来找下答案：

模块替换后的生效机制

1. 基本生效原理

Webpack 的模块替换后生效需要两个关键步骤：

1. 模块定义替换：更新内存中的模块代码
2. 模块重新执行：使新代码产生实际效果

2. 详细执行流程

当修改一个模块文件后：

1. 删除旧模块缓存：

   delete __webpack_require__.c[moduleId];

   • 清除require缓存，确保下次require会重新执行模块

2. 插入新模块代码：

   __webpack_modules__[moduleId] = newModuleFunction;

   • 更新内存中的模块定义

3. 重新执行依赖链：

   // 重新require这个模块
   __webpack_require__(moduleId);

   • 从被修改的模块开始，向上遍历所有父模块(parents)
   • 对每个找到的父模块： a. 删除其缓存 b. 重新执行该模块

4. 执行accept回调：

   // 在父模块中通常有这样的代码
   module.hot.accept('./dependency', callback);

   • 触发开发者定义的热更新回调函数

3. 不同场景下的具体行为

场景1：简单工具模块

// utils.js
export function getTime() {
  return new Date().toISOString();
}

// app.js
import { getTime } from './utils';
setInterval(() => console.log(getTime()), 1000);

更新过程：

1. 替换utils.js模块代码
2. 由于app.js接受了更新(module.hot.accept)，重新执行app.js
3. 新的getTime实现立即生效

场景2：React/Vue组件

// Component.js
export default function Button() {
  return <button>Old Text</button>;
}

// App.js
import Button from './Component';
function App() {
  return <Button />;
}

更新过程：

1. 替换Component.js模块代码
2. React Fast Refresh会：
   • 保留组件状态
   • 用新组件替换旧组件实现
   • 触发重新渲染

4. 为什么需要重新执行？

JavaScript模块系统的特性：

• 模块在第一次被require时执行
• 导出的值是执行结果的快照
• 单纯替换模块定义不会自动重新执行代码

例子说明：

// counter.js
let count = 0; // 模块作用域变量
export function increment() {
  return ++count;
}

// app.js
import { increment } from './counter';
console.log(increment()); // 输出1

如果不重新执行模块：

• 替换模块定义后，count变量仍保持旧值
• 新代码无法获得正确的初始状态

5. 关键代码实现

Webpack运行时的核心逻辑：

function hotApply() {
  // 1. 删除旧模块缓存
  for(var id in outdatedModules) {
    delete installedModules[id];
  }
  
  // 2. 插入新模块代码
  for(var moduleId in appliedUpdate) {
    modules[moduleId] = appliedUpdate[moduleId];
  }
  
  // 3. 重新执行受影响模块
  for(var i = 0; i < outdatedSelfAcceptedModules.length; i++) {
    var moduleId = outdatedSelfAcceptedModules[i];
    // 重新require这个模块
    __webpack_require__(moduleId);
  }
}

6. 特殊情况处理

状态保持问题

对于需要保持状态的模块：

// data.js
let state = { counter: 0 };

// 在模块被替换前保存状态
module.hot.dispose(() => {
  window.__tmpState = state;
});

// 新模块加载后恢复状态
if (module.hot.data) {
  state = window.__tmpState;
}

副作用清理

// 清理旧模块的副作用
module.hot.dispose(() => {
  clearInterval(timerID);
});

总结

webpack通过模块替换，并重新执行了依赖新内容的父级模块，使得更新生效。Webpack HMR 通过：

1. 清除模块缓存
2. 替换模块定义
3. 重新执行受影响模块
4. 触发accept回调

这套组合拳确保了：

• 新代码被实际执行
• 模块状态得到正确处理
• 应用界面正确更新
• 开发者无需手动刷新页面

这种机制正是Webpack热更新既高效又准确的关键所在。