Webpack 是一个前端模块打包工具（Module Bundler），它的核心作用是把多个分散的代码文件打包成一个（或多个）浏览器能直接运行的文件 。
你的项目代码：
├── src/
│ ├── main.js ← 入口文件
│ ├── utils/
│ │ ├── date.js ← 工具函数
│ │ └── format.js
│ ├── components/
│ │ ├── Button.vue ← Vue 组件
│ │ └── Table.vue
│ └── assets/
│ ├── logo.png ← 图片
│ └── style.scss ← SCSS 样式
浏览器报错 ❌：
- 不支持 import/export 语法
- 不支持 .vue 文件
- 不支持 .scss 文件
- 大量 HTTP 请求（性能差）
使用 Webpack 打包后：
Webpack 处理后：
├── dist/
│ ├── main.js ← 所有 JS 合并成一个文件
│ ├── main.css ← 所有样式提取合并
│ └── assets/
│ └── logo.png ← 图片处理后的版本
浏览器正常 ✅
Webpack 的核心功能
功能 说明
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
模块打包 把多个 JS/CSS/图片等文件打包成少量文件
Loader 转换非 JS 文件（如 vue-loader 处理 .vue，sass-loader 处理 .scss）
Plugin 执行各种任务（压缩、提取 CSS、生成 HTML 等）
代码分割 按需加载（懒加载），减少首屏加载时间
开发服务器 提供热更新（HMR），修改代码自动刷新浏览器
1. 什么是 Vite?
Vite 是由 Evan You（Vue.js 的作者）开发的一个构建工具，目标是为现代前端开发提供更好的开发体验和更快的构建速度。Vite 采用了一些创新的思路，尤其是在 开发模式下，通过利用浏览器的原生模块支持来显著提升开发速度。
开发体验：Vite 使用原生 ES 模块，在开发时不需要打包，只需要启动一个开发服务器并通过 HTTP 请求直接加载模块。这样可以避免 Webpack 在开发时的重打包开销。
构建速度：Vite 使用了现代浏览器的特性（如 ES 模块和动态导入）来避免传统构建工具中的繁重工作，尤其在冷启动和热更新（HMR）方面表现得尤为突出。
构建流程：Vite 在生产环境下会使用 Rollup 来进行打包，Rollup 是一个优化过的 JavaScript 打包工具，专注于高效的树摇（tree-shaking）和按需加载。
| 特性 | Vite | Webpack |
|---|---|---|
| 启动速度 | 非常快，采用原生 ES 模块，不需要打包过程，直接用浏览器加载模块 | 较慢，因为需要解析和打包整个项目，启动时会较慢 |
| 热更新 (HMR) | 非常快速，只有受影响的模块会重新加载 | 较慢，尤其是在大型项目中，每次 HMR 都可能触发大量的重新构建 |
| 打包工具 | 生产环境下使用 Rollup 打包 | 内置了自己强大的打包引擎 |
| 开发体验 | 由于无须每次都打包，开发时响应非常迅速，体验更好 | 由于需要在开发时进行打包，开发体验相对较慢 |
| 配置复杂度 | 配置简单，开箱即用，默认配置即能满足大多数项目需求 | 配置灵活但复杂，需要手动设置很多细节 |
| 支持的功能 | 开箱即用，支持 Vue、React 等主流框架，支持 TypeScript、JSX 等 | 功能非常强大，支持自定义插件、loader、代码分割等 |
| 生态系统 | 生态相对较新，插件支持逐步完善 | 生态成熟，插件和社区支持非常强大 |
| 性能 | 对开发模式有显著性能优化，尤其适用于大规模项目 | 生产模式性能较强，但开发模式下性能较差 |
| 树摇（Tree Shaking） | 内置 Rollup 支持，高效的树摇技术 | 内置树摇支持，但配置复杂，性能上可能不如 Rollup |