基于 webpack5 完成前端工程化建设

前言

内容来源于抖音哲玄前端 大佬的《大前端全栈实践》课程,此课程是从零开始做一个企业级的全栈应用框架。

工程化架构

  • 工程化本质就是一个解析引擎,负责将业务文件转换为适合生产环境使用的产物文件
  • 核心就是对业务文件进行解析编译、模块分包、压缩优化

什么是webpack

  • webpack就是一个解析引擎,通过传入不同的配置实现自己想要的效果

模块分包

js 复制代码
// 配置优化手段
optimization: {
	/**
	 * 将 js 文件打成三种包
	 * 1. vendor
	 *  第三方库,基本不会改动,除非依赖的版本升级
	 * 2. common
	 *  公共使用的代码块,改动很少
	 * 3. entry.page
	 *  个性化的 业务需求,改动频繁
	 *
	 * 这样设计,可以充分利用浏览器的缓存
	 */
	splitChunks: {
		chunks: "all", // 对同步和异步的模块都进行分割
		maxAsyncRequests: 10,
		maxInitialRequests: 10,
		cacheGroups: {
			vendor: {
				test: /[/\\]node_modules[/\\]/,
				name: "vendor",
				priority: 20, // 优先级,越大越高
				reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块
			},
			common: {
				name: "common",
				minChunks: 2, // 最少需要俩个地方引用 chunk 才分割
				minSize: 1, // 最小的分割文件大小 1字节
				priority: 10, // 优先级
				reuseExistingChunk: true // 如果当前 chunk 包含已从主 bundle 中拆分出的模块,则它将被重用,而不是生成新的模块
			}
		}
	}
}

实现HMR

  • HMR本质就是 一个服务器拥有监控能力+通知能力
  • 监控能力负责监听业务代码是否有改动
  • 通知能力则是通知浏览器更新页面
  • 为了提高更新的效率,我们把构建后的文件不落地到磁盘中,而是放到一个服务器的内存中
  • 具体在webpack中通过HotModuleReplacementPlugin和webpack-hot-middleware手动实现热替换功能

为什么是服务器

  • ​HMR 的核心机制​是服务器主动向浏览器推送变更
  • ​技术实现​ :通过 ​WebSocket​ (或 Socket.IO、SSE)建立双向通信通道
    • 文件修改时,服务器通过 WebSocket 通知浏览器:"模块 A 已更新,请拉取新代码"
    • 浏览器收到消息后,动态请求更新后的模块代码
相关推荐
雪碧聊技术12 分钟前
深入解析Vue中v-model的双向绑定实现原理
前端·javascript·vue.js·v-model
快起来别睡了14 分钟前
手写 Ajax 与 Promise:从底层原理到实际应用
前端
打不着的大喇叭1 小时前
uniapp的光标跟随和打字机效果
前端·javascript·uni-app
无我Code1 小时前
2025----前端个人年中总结
前端·年终总结·创业
程序猿阿伟1 小时前
《前端路由重构:解锁多语言交互的底层逻辑》
前端·重构
Sun_light1 小时前
6个你必须掌握的「React Hooks」实用技巧✨
前端·javascript·react.js
爱学习的茄子1 小时前
深度解析JavaScript中的call方法实现:从原理到手写实现的完整指南
前端·javascript·面试
莫空00001 小时前
Vue组件通信方式详解
前端·面试
呆呆的心1 小时前
揭秘 CSS 伪元素:不用加标签也能玩转出花的界面技巧 ✨
前端·css·html
susnm2 小时前
Dioxus 与数据库协作
前端·rust