模块打包是将分散的 JS、CSS、图片等资源按依赖关系整合为浏览器可运行文件的过程；它分析 import/export 构建依赖图，转换非 JS 资源，支持开发热更新与生产优化。Webpack 先全量打包再运行，启动慢但生态成熟；Vite 开发时不预打包，按需编译，启动快、热更快，生产用 Rollup 优化。新项目推荐 Vite，老项目或需兼容旧浏览器则选 Webpack。
模块打包，简单说就是把项目里分散的 JavaScript 文件（还有 CSS、图片、字体等）按依赖关系整理好，合并或组织成 浏览器 能直接运行的文件。它解决的是“代码怎么分、怎么连、怎么传给浏览器”的问题。
模块打包的核心目的
现代 前端 项目通常由成百上千个模块组成，比如一个按钮组件依赖 工具 函数，工具函数又依赖网络请求库。浏览器原生不理解这种层层 import 的写法，也不支持直接加载 .vue 或 .scss 文件。模块打包工具就负责：
- 分析所有 import/export 关系，画出完整的依赖图
- 把非 JS 资源（如 CSS、图片）转成 JS 可处理的形式或内联 / 链接方式
- 在开发时提供实时编译和热更新能力
- 在生产时压缩代码、拆分包、剔除无用代码（tree-shaking），提升加载性能
Webpack：先打包，再运行
Webpack 是“传统打包器”的代表。它启动开发服务器前，必须先把整个项目从入口开始递归解析，构建完整依赖图，再打包成 bundle（比如 main.js、vendor.css）。这个过程决定了它的特点：
- 开发启动慢：项目越大，首次打包越久；改一行代码，HMR 也可能要重跑依赖链
- 配置灵活但繁琐：处理 CSS 需 css-loader + style-loader，处理图片要 file-loader 或 url-loader，每类资源都要手动配 loader
- 生态成熟：插件极多，适合老项目、需要深度定制（如微前端、多环境构建）、兼容旧浏览器的场景
- 生产构建稳定：支持 code splitting、dynamic import、scope hoisting 等高级优化
Vite：不打包，只响应请求
Vite 把“开发”和“生产”彻底分开。它利用现代浏览器原生支持 ES 模块（import）的特性，开发时不做预打包：
立即学习“Java 免费学习笔记（深入）”；
- 启动秒开：服务一跑起来就能访问，浏览器请求哪个模块，Vite 就即时编译哪个（比如 .vue → JS ESM）
- 热更新极快：改一个组件，只重新编译它自己，不牵连父组件或公共库
- 开箱即用：CSS、JSON、静态资源默认支持，无需配置 loader；.ts、.jsx、.vue 都有内置转换
- 生产用 Rollup：生成更小、更干净的包，tree-shaking 效果通常优于 Webpack 默认配置
选哪个，看实际需求
新项目、主流框架（Vue/React/Svelte）、面向现代浏览器，Vite 是默认推荐——快、轻、省心。已有大型 Webpack 项目、需兼容 IE、或依赖大量 Webpack 专有插件（如某些 CMS 构建流程），继续用 Webpack 更稳妥。两者不是替代关系，而是分工演进：Vite 解决开发体验瓶颈，Webpack 守住复杂工程控制力。
