Webpack 热更新原理

[suzhen]

Webpack 热更新原理

• Webpack的热更新又称为热替换(Hot Module Replacement), 这个机制可以做到不刷新浏览器而将变更的模块替换掉旧的模块
• 其原理如下:
• HMR的核心就是 客户端 从 服务端 拉取更新后的文件, 准确的说是 chunk diff (chunk 需要更新的部分)
• Webpack Dev Server(WDS 服务端)与 浏览器(客户端)之间维护了一个 Websoket
• 当服务端)资源(发生变化时, WDS 服务端会向浏览器(客户端)推送更新,并带上构建时的 hash, 让客户端与上一次资源进行对比.
• 1- 当客户端对比出差异后会向 WDS 发起 Ajax 请求来获取更改内容(文件列表, hash): 获取列表/hash
• 2- 客户端就可以再借助这些信息继续向WDS发起jsonp请求获取chunk的增量更新: 更新内容
• 后续的部分(拿到增量更新之后如何处理, 哪些状态保留, 哪些需要更新)由 HotModulePlugin来完成.