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

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

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

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

具体的步骤如下

  1. 运行 webpack 命令,启动 webpack 开发服务器,分为两个,一个是使用 express 创建的静态资源打包服务,一个是 websocket 服务用于热更新
  2. websocket 服务监听模块变化,把变化的文件主动发送给客户端浏览器
  3. 浏览器会注入 js 代码,创建 websocket 用来接收服务器的消息,接收变化的文件,针对模块进行更新。
相关推荐
JustHappy3 分钟前
「Versakit 0.3 重磅发布」 两个月开发成果全揭!
前端·javascript·vue.js
chenqi13 分钟前
WebGPU和WebLLM:在浏览器中解锁端侧大模型的未来
前端·人工智能
Lingxing14 分钟前
Vue组件树:从设计到实现的全方位指南 🚀
前端·vue.js
玖玖passion15 分钟前
leader:请你用Protobuf进行数据交互🥲
前端
Linruoxin19 分钟前
为什么给 body 设置背景会直接铺满整个视口?
前端·css
Jenlybein22 分钟前
Vue3 权限控制:利用动态路由与自定义指令
前端·vue.js
codelang2 小时前
Cline + MCP 开发实战
前端·后端
好_快3 小时前
Lodash源码阅读-memoizeCapped
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-toString
前端·javascript·源码阅读
好_快3 小时前
Lodash源码阅读-memoize
前端·javascript·源码阅读