Vite、Webpack、Gulp构建工具详解

1. Vite：面向现代浏览器的极速开发工具，开发阶段基于原生ES模块（ESM）实现按需编译，生产环境用Rollup打包，适合追求开发效率和轻量化的项目。
2. Webpack：全能型模块打包工具，通过依赖分析和代码分割实现复杂构建流程，适合大型项目或需要深度定制的场景。
3. Gulp：基于任务流的自动化工具，通过管道（pipe）处理文件，适合简单资源处理和传统工作流。

---

一、Vite：新一代前端构建工具

▶ 核心特点

• 开发阶段：利用浏览器原生ESM能力，实现「按需编译」而非全量打包，启动速度毫秒级。
• 生产阶段：使用Rollup打包，生成高度优化的静态资源。
• 开箱即用：内置对TypeScript、CSS预处理器、HMR（热更新）的支持。

▶ 底层原理

1. 依赖预构建：首次启动时用ESbuild将CommonJS模块转为ESM并缓存。
2. 按需加载：浏览器直接请求源码文件，Vite拦截请求后实时编译（如.vue文件）。
3. HMR优化：仅更新修改的模块，无需刷新页面。

▶ 适用场景

• 现代框架项目（Vue/React）
• 需要快速启动和热更新的场景
• 中小型项目或原型开发

▶ 示例代码

# 创建Vite项目
npm create vite@latest my-project -- --template vue

---

二、Webpack：模块化打包的行业标准

▶ 核心特点

• 依赖图谱：递归分析文件间的import/require关系，生成依赖图。
• 代码分割：支持动态导入（dynamic import）和分包策略。
• Loader机制：通过loader处理非JS资源（如CSS、图片）。
• 插件系统：可扩展性强，社区生态丰富。

▶ 工作流程

1. 入口分析 → 2. 依赖解析<