Webpack5+Vite基础知识

前言：为什么需要打包工具？

开发时，我们会使用框架（React、Vue），ES6 模块化语法，Less/Sass 等 css 预处理器等语法进行开发。

这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、CSS等语法，才能运行。

所以我们需要打包工具帮我们做完这些事。

除此之外，打包工具还能压缩代码、做兼容性处理、提升代码性能等。

当我们习惯了在node中编写代码的方式后，在回到前端编写html、csS、js这些东西会感觉到各种的不便。比如：不能放心的使用模块化规范（浏览器兼容性问题）、即使可以使用模块化规范也会面临模块过多时的加载问题。

我们就迫切的希望有一款工具可以对代码进行打包，将多个模块打包成一个文件。这样一来即解决了兼容性问题，又解决了模块过多的问题。

• 开发会使用 ES6 模块化、框架、Less/Sass 等浏览器无法直接识别的语法，需要打包工具编译转换。
• 解决浏览器模块化语法的兼容性问题。
• 合并多个零散模块文件，减少请求次数，优化加载速度。
• 可压缩代码、做兼容性处理，精简体积。
• 整体优化项目代码，提升浏览器运行性能。

一、Webpack基本实现

1. Webpack的构建流程

总结：Webpack 会首先根据配置找到入口文件，从入口开始递归解析所有模块依赖，构建依赖图谱；接着通过 Loader 对各类非 JS 文件进行编译、语法转换与兼容处理，再在打包各个生命周期中执行 Plugin 插件完成优化、压缩、资源处理等操作，最后将所有处理后的模块整合、合并打包，输出压缩优化后的最终静态资源到指定目录。

2. Webpack的打包优化

Webpack 打包优化主要从缩小打包体积、提升打包速度、优化运行性能三个方向入手，核心方案如下：

1. 提升构建速度
   配置 mode: production开启生产模式；使用 cache缓存构建结果；通过exclude/include 精准筛选 loader 处理文件，避免编译无关模块；使用 thread-loader开启多线程加速编译。
2. 减小打包体积
   采用Tree Shaking 剔除无用代码；通过代码分割（Code Splitting） 拆分入口文件与第三方依赖，实现按需加载；使用 externals 提取大型第三方库（如 React、Vue、jQuery），把大型第三方库从打包文件中剥离出去，不参与打包，直接用 CDN 在线加载。CDN 资源会被浏览器缓存，用户再次访问时不用重新下载，并且项目代码和第三方库可以同时加载，提升首屏渲染速度；开启 压缩优化，压缩 JS、CSS、图片资源。
3. 资源与加载优化
   配置 asset-module 处理图片 / 字体等静态资源，实现压缩与转 Base64；使用懒加载 import() 减少首屏代码体积；通过CSS 抽离 单独打包样式文件，避免样式阻塞。

提速用缓存、多线程、精准编译；减体积用 Tree Shaking、代码分割、externals、资源压缩；优化加载用懒加载、CDN、抽离 CSS。

面试回答简化版：
打包优化可以从速度、体积、性能这三个方面入手

1. 提升打包速度：开启生产模式、配置构建缓存，通过include/exclude缩小 Loader 编译范围，使用多线程打包，提升构建效率。
2. 缩小打包体积：开启 Tree Shaking 移除无效代码，做代码分割和路由懒加载；通过externals剥离第三方大型库，CDN 外部引入，同时压缩 JS、CSS、图片等资源。
3. 优化运行性能：抽离独立 CSS 文件，避免样式阻塞；统一管理静态资源，优化首屏加载速度。

3. loader和plugin的编写思路

1. Loader 编写思路
   Loader 本质是纯函数，接收源文件内容，返回处理后的内容。
   执行顺序：从右往左、从下往上依次执行。
   核心流程：读取文件源码 → 对代码进行转换、编译、替换、转义等处理 →输出处理后的代码交给下一个 loader。
   同步用 return，异步用 this.callback，复杂场景可开启异步处理。
2. Plugin 编写思路
   Plugin基于Webpack 生命周期钩子工作，通过事件回调介入打包全过程。
   本质是类，必须有 apply 方法，接收 compiler 实例。
   核心流程：在 apply 中注册钩子 → 监听打包关键阶段事件 → 获取编译资源、修改文件、注入内容、删除目录等自定义操作 → 完成自定义功能。

先由 Loader 完成单个文件的编译转换（比如将 Less