【前端工程化面试题目】webpack 的热更新原理

可以在顺便学习一下 vite 的热更新原理，请参考这篇文章。

首先有几个知识点需要明确

1. 热更新是针对开发过程中的开发服务器的，也就是 webpack-dev-server
2. webpack 的热更新不需要额外的插件，但是需要在配置文件中 devServer属性中配置，需要安装 webpack-dev-server 这个 npm 包
3. webpack 的热更新也使用 websocket

具体的步骤如下

1. 运行 webpack 命令，启动 webpack 开发服务器，分为两个，一个是使用 express 创建的静态资源打包服务，一个是 websocket 服务用于热更新
2. websocket 服务监听模块变化，把变化的文件主动发送给客户端浏览器
3. 浏览器会注入js代码，创建 websocket 用来接收服务器的消息，接收变化的文件，针对模块进行更新。