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的代码,事件会一层层冒泡直至刷新整个页面