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

CssHero2025-05-31 18:27

前言

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

工程化架构

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

什么是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 已更新，请拉取新代码"
- 浏览器收到消息后，动态请求更新后的模块代码