Q17 · Webpack

Webpack 文件监听原理是什么？

Webpackwatch文件监听

⚡ 速记答案（30 秒）

  • 通过轮询 + 文件系统通知（如 Node 的 fs.watch、fs.watchFile 或 chokidar）
  • 记录每个依赖文件的 mtime（修改时间），定期比较是否变化
  • 一旦文件改变，触发增量编译，只重新构建受影响的模块/依赖图
  • dev server 再通过 HMR 或自动刷新让浏览器同步更新

📖 详细讲解

文件监听机制


两种方式


方式特点
轮询兼容性好，CPU 占用高
原生事件性能好，某些系统有限制

配置选项


module.exports = {
  watch: true,
  watchOptions: {
    ignored: /node_modules/,
    aggregateTimeout: 300, // 防抖
    poll: 1000, // 轮询间隔
  },
};

原理流程


1. 首次构建，记录所有文件的 mtime
2. 文件系统监听 / 定时轮询
3. 发现 mtime 变化
4. 触发增量编译
5. 通知 dev server
6. HMR / 刷新
💡
面试技巧：回答工程化问题时，结合你实际项目中的配置和优化经验，更有说服力。