定义

在不刷新页面的情况下, 自动更新模块代码, 从而大幅提升开发效率和体验.

实现原理

角色

• webpack compiler: 监听文件变化, 编译生成打包文件bundle.js
• webpack-dev-server启动并管理下列两个server
  • HMR Server: websocket server向浏览器推送发生更新的模块信息
  • Bundle Server: http server提供静态资源服务
• HMR Runtime: 打包时被注入到bundle.js中的额外代码, 负责与HMR server通信以及更新模块

更新流程

1. 文件系统监听到模块被修改后通知webpack
2. webpack compiler重新打包生成bundle.js, 然后通知HMR Server有模块发生更新
3. HMR Server --> websocker--> 通知HMR Runtime需要进行模块更新
4. HMR Runtime --> http requests --> Bundle Server返回新模块代码
   • HMR Runtime执行模块替换或者刷新页面

简言之, 三个角色, webpack负责监听和打包, websocket服务器通知runtime, runtime向http服务器请求新模块代码并最后完成模块替换.