webpack热更新Hot Module Replacement应该所有人都知道,现象就是你修改代码保存之后,浏览器不会刷新,只会修改你更改过的依赖代码。我们平时用webpack-dev-server如果没有配置,是直接刷新浏览器,并不是热更新。
之前遇见几次问webpack热更新原理,我只是知道和怎么使用,也没真的去了解一下,这次了解了一下,发现没有对webpack深层次研究,根本不懂,所以今天只是简单了解一下,具体还是得去研究源码才能真正掌握。
实现webpack热更新就不说了,官网HMR指南写的很清楚,用vue开发或者用react开发也都可以看效果。至于HMR的好处说来说去就一个,提升开发效率,即不用你手动刷新浏览器,还可以保持浏览器状态。
我们一般用webpack-dev-server启动一个开发服务,webpack内部实现watch,文件发生修改就重新打包编译保存在内存中,webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互,如果文件变化了,没有配置热更新,webpack-dev-server会通知浏览器进行刷新,注意是刷新不是热更新。启动开发服务之后,浏览器和服务端是通过websocket进行长连接的,可以自己在network里面看。
刚启动:
热更新之后:
服务端主要是传递hash值,热更新主要是通过hash值判断进行热更新。至于内部怎么进行热更新,这又是webpack的工作了,通过配置决定是刷新还是热更新,一般配置了热更新会先进行热更新,如果失败则刷新,如果配置了hotOnly则热更新失败也不刷新。
这边一笔带过内部机制,主要是我看不懂,也不理解,内部涉及HotModuleReplacementPlugin、HMR runtime等机制,怎么通过hash检查,怎么通过jsonp的方式,怎么把更新的模块代码传递给浏览器,这些底层原理还不是我能看懂的。可以通过源码,也可以看看network,每次热更新都会请求一个json文件和一个js:
咋一看,好像说了一堆废话,确实,貌似连大概流程都说不清楚,当作水文好了,应付应付面试,只要不是碰到真大佬,应该还是足够的,要是碰到真大佬,老实承认不会就好了。
面试的时候说:
大概流程是我们用webpack-dev-server启动一个服务之后,浏览器和服务端是通过websocket进行长连接,webpack内部实现的watch就会监听文件修改,只要有修改就webpack会重新打包编译到内存中,然后webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互,每次热更新都会请求一个携带hash值的json文件和一个js,websocker传递的也是hash值,内部机制通过hash值检查进行热更新,
至于内部原理,因为水平限制,目前还看不懂。