【前端工程化面试题目】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 用来接收服务器的消息,接收变化的文件,针对模块进行更新。
相关推荐
夕水13 分钟前
这个提升效率宝藏级工具一定要收藏使用
前端·javascript·trae
会飞的鱼先生27 分钟前
vue3 内置组件KeepAlive的使用
前端·javascript·vue.js
斯~内克41 分钟前
前端浏览器窗口交互完全指南:从基础操作到高级控制
前端
Mike_jia1 小时前
Memos:知识工作者的理想开源笔记系统
前端
前端大白话1 小时前
前端崩溃瞬间救星!10 个 JavaScript 实战技巧大揭秘
前端·javascript
loveoobaby1 小时前
Shadertoy着色器移植到Three.js经验总结
前端
蓝易云1 小时前
在Linux、CentOS7中设置shell脚本开机自启动服务
前端·后端·centos
浩龙不eMo1 小时前
前端获取环境变量方式区分(Vite)
前端·vite
土豆骑士2 小时前
monorepo 实战练习
前端
土豆骑士2 小时前
monorepo最佳实践
前端