大白话助你理解Webpack的热更新原理

Webpack的热更新原理大致分为以下几个步骤：

1. 启动 HMR： 在启动 Webpack时，通过配置启用 HMR 功能。
2. 与浏览器建立连接： Webpack会在启动时创建一个本地服务器，并与浏览器建立websocket连接。
3. 监听变化并打包： Webpack通过中间件持续监听代码变化，当模块发生变化时，重新编译并打包。
4. 服务器通知变化：本地服务器会通知浏览器说代码发生改变了。
5. 浏览器询问变化：浏览器会询问改变之后的hash和变更代码块名称。
6. 服务器告知结果：服务器告知变更之后的hash和变更代码块名称。
7. 浏览器获取结果：浏览器向本地服务器发起请求，获取变更代码块，并且这是一个jsonp请求，获取到代码块可以直接执行，替换旧代码，完成在浏览器上的更新。