webpack热更新原理
# webpack 热更新原理
简答：
大概流程是我们用 webpack-dev-server 启动一个服务之后，浏览器和服务端是通过 websocket 进行长连接，webpack 内部实现的 watch 就会监听文件修改，只要有修改就 webpack 会重新打包编译到内存中，然后 webpack-dev-server 依赖中间件 webpack-dev-middleware 和 webpack 之间进行交互，每次热更新都会请求一个携带 hash 值的 json 文件和一个 js，websocket 传递的也是 hash 值，内部机制通过 hash 值检查进行热更新，
# webpack 热更新原理
通过 webpack-dev-server 创建两个服务器：提供静态资源的服务（express）和 WebSocket 服务
express server 负责直接提供静态资源的服务（打包后的资源直接被浏览器请求和解析）
socket server 是一个 websocket 的长连接，可以建立本地服务和浏览器的双向通信。当本地文件发生变化时，服务器会立马告知浏览器热更新代码。
当 socket server 监听到对应的模块发生变化时，会生成两个文件.json（manifest 文件）和.js 文件（update chunk）
通过长连接，socket server 可以直接将这两个文件主动发送给客户端（浏览器）
浏览器拿到两个新的文件后，通过 HMR runtime 机制，加载这两个文件，并且针对修改的模块进行更新
# 相关知识点
webpack-dev-server：只负责启动服务和前置准备工作
webpack-dev-middleware：所有文件相关的操作都抽离至此，主要是本地文件的编译和输出以及监听
代码改动（生成了一个 Hash 和两个文件）：
每次修改代码，紧接着触发重新编译，然后浏览器就会发出 2 次请求。请求的便是本次新生成的 2 个文件。如下：
新的 Hash 值（Hash 值代表每一次编译的标识，本次输出的 Hash 值会被作为下次热更新的标识。）：a61bdd6e82294ed06fa3
新的 JSON 文件（上次输出的 Hash 值会作为本次编译新生成的文件标识）： a93fd735d02d98633356.hot-update.json
JSON 文件返回的结果对象中：
h 表示本次新生成的 Hash 值，用于下次文件热更新请求的前缀
c 表示当前要热更新的文件对应的是 index 模块
- 新的 JS 文件（上次输出的 Hash 值会作为本次编译新生成的文件标识）：index.a93fd735d02d98633356.hot-update.js
JS 文件为本次修改的代码
如果没有任何代码改动：
新的 Hash 值：d2e4208eca62aa1c5389
新的 JSON 文件：a61bdd6e82294ed06fa3.hot-update.json