关于前端打包
一、为什么需要打包，或者说打包解决了什么问题
1、模块化管理：
存在的问题：过去用 <script> 标签手动管理依赖，会出现“全局变量冲突”、“顺序错误”、“难以维护”的问题。
解决的方法：支持 ES Modules、CommonJS、AMD 等模块规范，让代码可以 import/export，实现清晰的依赖管理。
2、性能优化：
存在的问题：无数个小文件会产生数百个HTTP请求，浏览器并发限制会导致加载缓慢。
解决的方法：将零散文件合并成少量bundle，减少请求数。同时可以代码压缩、Tree Shaking(移除未引用的代码)、代码分割（按需加载），显著减少资源体积。
3、开发体验：
存在的问题：手写原生CSS缺乏变量/嵌套，写JS要用新语法（如ES6+、 TypeScript）,改完代码需要手动刷新浏览器调试。
解决的方法：提供开发服务器（热更新）、预处理器（Sass/Less）、编译器（Babel/TypeScript）、图片压缩等一站式编译能力，让开发者专注于业务逻辑。
二、打包具体做了什么
前端里说的打包（Bundle / Packaging），就是把很多的分散文件（JS、CSS、图片、字体）合并、压缩、优化成少数几个文件，让网页加载更快、能上线运行。
主要功能包括：
1. 模块化处理
功能说明：将不同模块规范（ESM、CommonJS、AMD）的代码统一处理，使其能在浏览器中运行；
技术实现：将每个模块包裹在函数中，通过运行时（runtime）管理模块加载和缓存；
面试价值：这是打包工具的基础能力，解决了浏览器原生不支持模块化的问题；
2. 依赖管理
功能说明：分析模块间的导入导出关系，构建完整的依赖图；
技术实现：从入口文件开始，递归解析import/require语句，记录所有依赖；
关键价值：确保所有模块按正确顺序加载，避免全局变量污染和依赖缺失；
3. 代码转换 (Transformation)
功能说明：将非JS资源（如TypeScript、Vue、JSX、图片、CSS）转换为浏览器可识别的格式；
技术实现：通过 Loader 机制链式处理文件内容（如 sass-loader → css-loader → style-loader）；
典型场景：
- TypeScript → JavaScript
- Sass/Less → CSS
- 图片 → 图片URL或Base64
- JSX → React.createElement
4. 代码优化 (Optimization)
功能说明：减少代码体积，提升运行效率；
关键技术：
- 代码压缩：去除空格、注释，缩短变量名（如 Terser、esbuild）；
- Tree Shaking：消除未引用的代码（Dead Code Elimination）；
- 作用域提升：将多个模块合并到同一作用域，减少函数包裹开销；
- 常量折叠：在编译时计算常量表达式（如 1 + 2 变成 3）；
5. 代码分割 (Code Splitting)
功能说明：将代码拆分成多个chunk，实现按需加载或并行加载；
实现方式：
- 动态导入：import('./module.js') 自动分割；
- 公共模块抽取：将多入口共享的代码（如lodash、React）提取到单独文件；
- 路由级分割：不同路由对应不同的chunk；
性能价值：减少首屏加载体积，利用浏览器缓存提高二次访问速度；
6. 资源处理
功能说明：管理静态资源（图片、字体、音频等）的加载和输出；
处理策略：
- 小资源内联：小于阈值的图片转成Base64，减少HTTP请求；
- 大资源单独输出：生成带哈希的文件名，便于缓存更新；
- 资源优化：图片压缩、字体子集化等；
7. 开发体验增强
功能说明：提升开发效率和调试便利性；
关键特性：
- 热模块替换：修改代码后只更新变更模块，不刷新页面，保持状态；
- 开发服务器：提供HTTP服务、代理API、文件监听；
- Source Map：将打包代码映射回源码，方便调试；
- 错误提示：编译错误时提供友好的堆栈和位置信息；
三、常见的打包工具
- Webpack - 最流行的打包工具，功能强大；
- Vite - 现代化工具，开发体验更好；
- Rollup - 适合库开发；
- Parcel - 零配置，易于上手；
四、打包示范流程
五、常见配置要素
总结：入口出口 + 路径别名 + 资源处理 + 语法转译 + 代码分割压缩 + 环境变量 + 静态复制 + 兼容适配
1. 入口 & 出口配置
- 入口文件：项目从哪个文件开始打包（main.js/index.js）；
- 输出目录：打包产物输出到哪，默认dist；
- 输出文件名：JS/CSS 加哈希后缀（防止浏览器缓存）；
2. 路径 & 基础路径
- 公共基础路径：base/publicPath部署在根目录、子目录、CDN 都靠它配置；
- 别名路径：@指向src，简化导入路径，不用写../../；
3. 资源处理配置
- CSS 处理：Less/Sass/Stylus 编译、自动加浏览器前缀、CSS 抽离单独文件；
- 静态资源：图片 / 字体 / 视频小于阈值转 base64，大于阈值打包成独立文件；
4. 语法兼容 & 转译
- ES6+ / TS 转译：兼容低版本浏览器；
- Vue/React 单文件编译：解析.vue、.jsx；
- 浏览器兼容列表：配置需要兼容哪些机型、浏览器；
5. 代码优化配置
- 代码压缩：压缩 JS、CSS、HTML，删除空格注释；
- Tree-Shaking：剔除未使用的冗余代码；
- 代码分割：路由懒加载、第三方包单独拆包（vendor），首屏加载更快；
- Gzip 压缩：打包生成 .gz 文件，服务器开启后极大提速；
6. 环境变量配置
- 区分开发环境 / 生产环境；
- 配置接口地址、开关、埋点、调试模式；
- 打包时自动屏蔽 console.log、调试代码；
7. 静态资源复制
- 把public目录下静态文件（图标、静态 html）直接原样复制到打包目录，不编译；
8. 打包排除 & 忽略
- 打包忽略 node_modules、本地测试文件、日志文件；
- 按需排除大第三方库，用 CDN 引入减小包体积；
9. 跨域 & 代理配置（开发环境）
- 本地开发代理接口，解决跨域；
- 打包生产环境自动失效，不影响线上；
10. 打包进度 & 可视化
- 打包进度条、体积分析；
- 查看哪个依赖包体积过大，方便优化；