webpack 热更新 | K.island ✨

刷新我们一般分为两种：

一种是页面刷新，不保留页面状态，就是简单粗暴，直接 window.location.reload()
另一种是基于 WDS (webpack-dev-server) 的模块热替换，只需要局部刷新页面上发生变化的模块，同时可以保留当前的页面状态（比如复选框的选中状态、输入框的输入等）

HMR

HMR 全称 Hot Module Replacement，直译为 模块热替换（或许 热更新 更好听一点），它指在应用程序运行过程中，替换、添加、删除模块，而无需重新刷新整个应用

通过此功能，实现只将修改的模块实时替换至应用中，不必完全刷新整个应用导致整个页面的状态信息丢失（从 webpack4 开始，HMR 功能是默认开启的）

我们启动一个基于 webpack 构建的项目后，修改某个文件保存后，控制台会出现 Compiling... 字样，然后生成新的 hash 文件。每次重新编译后，浏览器会发出两个新的请求，也就是本次编译得到的两个新文件（[hash].hot-update.json 和 [hash].hot-update.js），从浏览器控制台看 json 文件大概长这样：

json

{
  "c": {
    "index": true
  },
  /* h 代表本次编译新生成的 Hash 值 */
  "h": "ajjhoaisfghagha29862njbkjb" /* 乱写的 hash 值 */
}

hash 值代表每次编译结果的标识，同时也会作为编译文件的文件名作为文件的标识，而且会作为两次编译结果的比对标识

小 K. 同学

HMR #

HMR