1.webpack热更新及原理

1.什么是热更新？

HMR全程Hot Module Replacement，可以理解为模块热替换，是指在应用程序运行过程中，替换、添加、删除模块，而无需刷新整个应用

2.相关配置

module.exports = {
  ...
  devServer: {
    host: "localhost",
    port: 3000,
    open: true,
    hot: true, // 开启HMR
    historyApiFallback: true, // 解决前端路由刷新404问题
  },
};

通过这样的配置，如果我们修改并保存css文件，能够以不刷新的形式更新到页面中，但是我们修改并保存js文件，页面依旧刷新，这里并没有触发热模块，所以HMR不像webpack其他特性一样可以开箱即用，需要一些额外的操作

我们需要指定哪些模块发生更新时进行HRM

if (module.hot) {
  module.hot.accept('./util.js', () => {
    console.log("util.js")
  })
}

3.实现原理

1.Webpack Compile：将JS源代码编译成bundle.js

2.HMR Server：将热更新的文件输出给HMR Runtime

3.Bundle Server：静态资源文件服务器，提供文件访问路径

4.HMR Runtime：socket服务器，会被注入到浏览器，更新文件变化

5.bundle.js：构建输出的文件

在HMR Runtime 和HMR Server之间建立websocket，即图上4号线，用于更新文件变化

启动阶段：1 -> 2 -> A -> B

更新阶段：1 ->2 -> 3 -> 4

总结：

        通过webpack-dev-server创建两个服务器：提供静态资源服务（express）和Socket服务

        express服务负责直接提供静态资源服务（打包后的资源直接被浏览器请求和解析）

        socket server 是一个websocket的长连接，双方可以通信

        当socket server 监听到对应的模块发生变化时，会生成两个文件.json（mainfest文件）和.js文件（update chunk）

        通过长连接，socket server 可以直接将两个文件主动发送给客户端（浏览器）

        浏览器拿到这两个文件后，通过HMR runtime机制，加载这两个文件，并且对修改的模块进行更新