源代码                          输出产物
─────────────────────────────────────────────
TS/ES6+ 语法          →        ES5 标准语法
CSS 预处理器          →        标准 CSS
图片/字体等资源       →        优化后的资源文件
模块化代码            →        浏览器可识别的 JS

开发过程需求清单：
┌──────────────────────────────────────┐
│  实时预览页面                        │
│  实时编译资源文件                    │
│  增量编译（只编译修改的部分）         │
│  热模块替换（HMR）                   │
│  开发调试（组件、网络）               │
│  源码映射（Source Map）              │
└──────────────────────────────────────┘

Vite：
  开发模式 → 原生 ESM + 按需编译 + 极速 HMR
  生产模式 → Rollup 打包

项目状态分析：
┌─────────────────────────────────────┐
│  存量项目                            │
│  ├── Vue CLI 2/3 项目（基于 Webpack）│
│  ├── Create React App（基于 Webpack）│
│  ├── 企业级 Webpack 项目             │
│  └── 需要维护或升级                  │
└─────────────────────────────────────┘

从零开始学 Webpack → 配置开发环境 → 项目开发
 配置复杂，学习成本高
 开发体验差，效率低

第一步：读懂 Webpack 配置文件
       └── 理解核心概念（entry/output/loader/plugin）
       └── 维护存量项目
 
第二步：理解打包原理
       └── 依赖图构建
       └── 模块打包流程
       └── 升级项目
 
第三步：扩展应用
       └── 编写插件
       └── 定制化构建

选择工具 → 应用项目 → 发现问题 → 被动适应
     ↓
 工具是否适合项目？
 是否需要额外配置？
 是否需要自己写插件？

确定应用场景 → 分析需求 → 选择合适工具
     ↑              ↑
  最终目标      决策依据

┌──────────────────────────────────────────────────────┐
│                    应用（Application）                │
│         你的项目是什么？需要什么功能？                 │
└─────────────────────┬────────────────────────────────┘
                      ↓
┌──────────────────────────────────────────────────────┐
│                    场景（Scenario）                   │
│   开发场景：实时预览、热更新、调试                     │
│   构建场景：语法转换、代码分割、压缩优化               │
│   特殊场景：模板语法支持、特定格式处理                 │
└─────────────────────┬────────────────────────────────┘
                      ↓
┌──────────────────────────────────────────────────────┐
│                    工具（Tool）                       │
│   Webpack | Vite | Rollup | Gulp | esbuild | ...    │
│         选择最适合的工具，而非最流行的工具              │
└──────────────────────────────────────────────────────┘

项目类型：Vue 3 Web 应用
技术栈：Vue 3 + TypeScript
UI 框架：Element Plus / Ant Design Vue
兼容性要求：现代浏览器（不需要兼容 IE）

需求场景：
├── Vue 3 SFC 单文件组件支持
├── TypeScript 编译
├── 快速开发体验（HMR）
├── 模块化打包
└── 现代浏览器支持
 
工具选择：
┌─────────────────────────────────────┐
│   Vite（最佳选择）                 │
│  ├── 官方推荐，Vue 生态原生支持      │
│  ├── 开发体验极佳                    │
│  ├── 打包构建快速                    │
│  └── 配置简单，开箱即用              │
└─────────────────────────────────────┘
 
 Webpack（不推荐）
   ├── 配置复杂
   ├── 启动慢，HMR 慢
   └── 过度设计

项目类型：npm 组件库 / 工具库
运行环境：Node.js
技术栈：TypeScript
输出格式：ESM + CommonJS

需求场景：
├── TypeScript 编译
├── 输出多种模块格式（ESM/CJS）
├── 类型声明文件生成（.d.ts）
├── Tree Shaking 支持
└── 简单的构建配置
 
工具选择决策树：
┌─────────────────────────────────────────┐
│ 需要实时调试？                           │
│ ├── 是 → 选择支持开发服务器的工具         │
│ └── 否 → 选择专注打包的工具              │
├─────────────────────────────────────────┤
│ 模块数量多？需要性能？                    │
│ ├── 是 → esbuild / swc                  │
│ └── 否 → Rollup / tsup                   │
├─────────────────────────────────────────┤
│ 需要支持 .mts/.cts 后缀？                │
│ └── 选择支持新特性的工具                 │
└─────────────────────────────────────────┘
 
推荐方案：
┌─────────────────────────────────────┐
│   tsup（最简单）                   │
│  ├── 零配置 TypeScript 库打包        │
│  ├── 支持 ESM/CJS 多格式输出         │
│  └── 基于 esbuild，速度快            │
│                                     │
│   Rollup（最灵活）                 │
│  ├── 配置灵活，功能强大              │
│  ├── 输出纯净，Tree Shaking 好       │
│  └── 库打包的标准选择                │
└─────────────────────────────────────┘
 
 联想到：tsx 工具
   tsx 可以直接执行 TypeScript 代码，无需额外配置

项目类型：存量项目
技术栈：Vue 2 / Webpack 4 / Node 12
目标：
├── 提升打包构建速度
├── 支持 Node 16/18/20
└── 使用新特性

项目类型判断：
│
├─ Vue 2 项目（Vue CLI 构建）
│   │
│   ├─ 迁移到 Vite
│   │   ├── 使用 create-vue 创建新项目
│   │   ├── 渐进式迁移组件
│   │   └── vite-plugin-vue2 兼容 Vue 2
│   │
│   └─ 保持 Vue CLI
│       └── 维护模式，不推荐新功能开发
│
├─ Webpack 4 项目
│   │
│   ├─ 升级到 Webpack 5
│   │   ├── 官方提供 Migration Guide
│   │   ├── 支持 Node 16/18/20
│   │   └── 性能优化（持久化缓存等）
│   │
│   └─ 迁移到 Vite
│       ├── 评估迁移成本
│       └── 使用 vite-plugin-webpack-bridge
│
├─ Webpack 3 项目
│   │
│   └─ 建议：不要动它！
│       ├── 运行稳定就不要改
│       └── 考虑 Docker 容器化隔离
│
└─ 稳定的老项目
    │
    └─ Docker 容器化方案
        ├── 封装为独立服务模块
        ├── 保持源码不动
        └── 新技术栈通过接口调用

Vue CLI 状态：
┌─────────────────────────────────────┐
│  状态：维护模式（Maintenance Mode）   │
│  替代：create-vue（基于 Vite）        │
│  建议：新项目使用 create-vue          │
└─────────────────────────────────────┘

Create React App 状态：
┌─────────────────────────────────────┐
│  底层：Webpack                       │
│  状态：仍在维护，但更新缓慢           │
│  趋势：Vite 创建 React 项目更流行     │
└─────────────────────────────────────┘

Turbopack：
┌─────────────────────────────────────┐
│  语言：Rust                          │
│  底层：SWC（极速 JavaScript 编译器）  │
│  特点：增量编译 + 函数级缓存          │
│  性能：比 Webpack 快 700 倍          │
└─────────────────────────────────────┘

Webpack:    JavaScript 编写
Vite:       JavaScript + esbuild (Go)
Turbopack:  Rust + SWC

SWC (Speedy Web Compiler)：
├── 用 Rust 编写的 JavaScript/TypeScript 编译器
├── 替代 Babel，速度提升 20 倍以上
├── Turbopack 底层使用 SWC 进行代码编译
└── Next.js 13+ 已集成 Turbopack

第一阶段：读懂配置（维护项目）
├── 核心概念：entry/output/loader/plugin
├── 配置文件结构
├── 常见 loader 使用（babel-loader/css-loader 等）
└── 常见 plugin 使用（html-webpack-plugin 等）
 
第二阶段：理解原理（升级项目）
├── 依赖图构建原理
├── 模块打包流程
├── HMR 原理
└── Tree Shaking 原理
 
第三阶段：扩展应用（定制需求）
├── 编写自定义 loader
├── 编写自定义 plugin
└── 性能优化实践

优先级排序：
┌─────────────────────────────────────┐
│   Vite - 必须精通                  │
│     新项目首选，开发体验最佳          │
│                                     │
│   Webpack - 必须了解               │
│     存量项目维护，生态最丰富          │
│                                     │
│   Rollup - 建议掌握                │
│     库开发必备，Vite 生产环境底层     │
│                                     │
│   esbuild - 建议了解               │
│     极速编译，未来趋势                │
│                                     │
│   Turbopack - 持续关注            │
│     未来可能，暂不投入太多精力        │
└─────────────────────────────────────┘

第一步：明确应用类型
├── Web 应用？组件库？工具库？
├── 前端项目？Node.js 项目？
└── 新项目？存量项目？
 
第二步：分析场景需求
├── 开发体验要求（启动速度、HMR）
├── 构建性能要求（项目规模）
├── 特殊功能需求（特殊格式、插件）
└── 兼容性要求（浏览器、Node 版本）
 
第三步：选择合适工具
├── 对比工具特性与需求匹配度
├── 考虑生态成熟度和社区活跃度
└── 评估学习成本和迁移成本