likes
comments
collection
share

HMR知识点梳理

作者站长头像
站长
· 阅读数 38

HMR是啥？

简单来讲就是开发的时候更新代码不用刷新整个页面就可以更新对应的内容，可以提高开发效率

webpack中实现HMR所依赖的api与技术功能点

  1. nodejs的监听文件的apihttp://nodejs.cn/api/fs.html#fs_fs_watchfile_filename_options_listener，用于监听文件变化
  2. 内存文件系统https://github.com/webpack/webpack-dev-middleware/blob/v3.7.0/lib/fs.js#L115，用内存文件系统替换compiler自带的文件系统，可以大大提高效率
  3. 及时通讯，生成新的代码块后主动通知客户端
  4. 模块中需要处理HMR的事件，一般在loader中处理，可以参考vue-loader的https://github.com/vuejs/vue-loader/blob/6a05115ddf3ea680ab2b00862b2891da2e98a41c/lib/codegen/hotReload.js，如果对应模块中没有处理HMR的代码，事件会一层层冒泡直至刷新整个页面