webpack打包原理_简单了解webpack热更新原理

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值检查进行热更新，至于内部原理，因为水平限制，目前还看不懂。

(完)

Coding 个人笔记