webpack 热更新的实现原理


  • 开发服务器
    • 服务: 在开发过程中提供静态资源和热更新服务
    • 存储: 在内存中存储 bundle 文件
  • 文件监听: 文件发生变化时, 重新编译发生变化的模块
  • websocket 通信: 通过 websocket 通知浏览器哪些模块发生了变化
  • 动态加载
    • 请求: 浏览器请求发生变化的模块
    • HMR 运行时: 通过 HMR 运行时动态加载并更新模块, 而不刷新整个页面