webpack文件监听原理和热更新原理

date

Sep 19, 2023

slug

webpack_watch_hot_update

status

Published

文件监听原理

发现源码发生变化时，自动重新构建新的输出文件

开启监听两种方式

webpack命令行里带—watch

在配置webpack.config.js中设置watch:true

缺点：每次需要手动刷新浏览器

原理：轮询判断文件的最后编辑时间是否变化，如果某个文件发生了变化，并不会立刻告诉监听者，而是先缓存起来，等aggregateTimeout后再执行。

webpack的热更新原理

热更新又称热替换。这个机制可以做到不用刷新浏览器而将新变更的模块替换掉旧模块。

HRM的核心就是客户端从服务端拉取更新后的文件，准确的说时chunk diff,实际上WDS(webpack dev server)与浏览器之间维护了一个Websocket，当本地资源发生变化时，WDS会向浏览器推送更新，并带上构建时的hash，让客户端与上一次资源进行对比。客户端对比出差异后会向WDS发起ajax请求来获取更改内容（文件列表、hash），这样客户端就可以再借助这些信息向WDS发起jsonp请求获取该chunk的增量更新。

说一下 Webpack 的热更新原理吧，是webpack通过node的接口watch文件变化，然后重新构建模块并通知浏览器变化的文件名。浏览器重新请求获取文件并替换该文件对应的模块。

hmr原理是开了一个express服务，持续监听文件改变，webpack-dev-server提供出了一个热更新接口，所有热更新都是通过这个接口来完成的

后续部分有Hot-moudle-plugin来完成，提供了相关api以供开发者针对自身场景进行处理，想react-hot-loader, vue-loader