你写过的 React JSX、TypeScript 类型注解、Tailwind 的 @theme 指令——浏览器其实一个都不认识。是构建工具在背后把这些「开发者语言」翻译成浏览器能执行的 HTML、CSS、JavaScript。本篇拆解 Vite 8 和 Webpack 5 两大构建工具的工作原理与配置方法，读完你将能独立搭建 Vite 项目并理解 Webpack 配置结构。
2010 年的前端开发：写一个 HTML 文件，内联 CSS 和 JS，直接用浏览器打开就能运行。2026 年的前端开发：你写了 TypeScript 组件，引用了 npm 包，CSS 用了 @import 和嵌套语法，图片需要压缩，代码需要混淆——浏览器直接打开全白屏。
这个「鸿沟」就是构建工具填平的。构建工具（Build Tool）做的事情可以归纳为一句话：把开发者写的不被浏览器理解的代码，转换成浏览器能理解的最优代码。
编译器（如 tsc）只做语言转换：TypeScript → JavaScript。构建工具做得更多：模块解析、依赖打包、资源压缩、代码分割、HMR 热更新、 tree-shaking 摇树优化。编译器是构建工具链条中的一个环节，构建工具是整条流水线的调度中枢。
前端工程化不只包含构建工具，还涵盖代码规范（ESLint/Prettier）、包管理（npm/pnpm）、CI/CD 自动化部署等。本篇聚焦构建工具这一核心环节。
无论 Vite 还是 Webpack，核心能力都可以拆成四个维度：
| 能力 | 具体做什么 | 没有会怎样 |
| 模块打包 | 把 import 的几十个文件合并成少量 bundle | 浏览器发 200+ 请求，加载极慢 |
| 语法转译 | TS → JS、JSX → JS、Sass → CSS | 浏览器报语法错误，白屏 |
| 代码优化 | 压缩、tree-shaking、代码分割 | 产物体积大 3-10 倍，加载慢 |
| 开发服务 | 本地服务器 + HMR 热更新 | 每次改代码手动刷新浏览器 |
理解这四个维度后，再看 Vite 和 Webpack 的差异就清晰了：两者的目标完全相同，差异在于实现方式和性能表现。
Vite 由 Vue 作者尤雨溪于 2020 年创建，名称来自法语「快」（vite）。2026 年 3 月 12 日发布的 Vite 8.0 是迄今为止最大的架构升级：用 Rust 编写的 Rolldown 替换了原来 esbuild（开发）+ Rollup（生产）的双引擎架构，统一为单一打包器，构建速度提升 10-30 倍。截至 2026 年 8 月，Vite 周下载量达 6500 万次，已成为 React、Vue、Svelte 等主流框架的默认构建工具。
Vite 8 的核心设计理念：开发时利用浏览器原生 ES Module，按需编译，启动即用；生产时用 Rolldown 打包优化，输出高效的静态资源。这种「开发追求速度，生产追求质量」的策略让开发体验和生产性能兼得。
Vite 8.2（2026 年 7 月发布）新增了改进的 bundled-dev 模式和增强的 HMR。此外 Vite 8 还内置了 Vite Devtools（调试分析工具）、tsconfig paths 路径别名支持、emitDecoratorMetadata 自动支持等特性。
Vite 8 要求 Node.js 20.19+ 或 22.12+。先用 node -v 确认版本，然后创建项目：
创建后启动开发服务器：
Vite 的启动几乎是即时的——不预打包所有模块，而是利用浏览器原生 ES Module 按需加载。修改代码后 HMR 热更新通常在毫秒级完成，不管项目多大。
创建的项目结构如下：
Webpack 项目中 index.html 通常放在 public/ 目录。Vite 把它放在项目根目录，因为 Vite 把 index.html 作为构建入口——<script type="module" src="/src/main.tsx"> 标签告诉 Vite 从哪里开始解析依赖图。
Vite 的配置文件是项目根目录下的 vite.config.ts。模板生成的默认配置非常简洁，但随着项目复杂度增加，你需要配置路径别名、代理、插件等：
逐段解析核心配置项：
| 配置项 | 作用 | 示例值 |
| plugins | 注册插件（React、Vue 等框架支持） | [react()] |
| resolve.alias | 路径别名，避免 ../../../ 嵌套 | '@' → ./src |
| server.port | 开发服务器端口号 | 3000 |
| server.proxy | 开发环境 API 代理，解决跨域 | /api → :8000 |
| build.outDir | 生产构建输出目录 | 'dist' |
HMR（Hot Module Replacement，热模块替换）是现代前端开发体验的核心。当你修改一个组件文件，浏览器不刷新整页，只替换变更的模块，保留当前页面状态（如表单输入、弹窗状态）。
Vite 的 HMR 工作原理：
在 React 项目中，@vitejs/plugin-react 插件自动接入 React Fast Refresh，组件状态在 HMR 后不会丢失。在 main.tsx 中可以看到入口：
开发模式和构建模式是两个完全不同的流程。开发模式追求速度（不打包，按需加载），构建模式追求产物质量（打包压缩、tree-shaking、代码分割）。
构建产物默认输出到 dist/ 目录。Vite 8 的 Rolldown 引擎自动执行以下优化：
| 优化项 | 作用 | 默认 |
| Tree-shaking | 删除未使用的 import 代码 | 开启 |
| Minify | 压缩 JS/CSS（Oxc 压缩器） | esbuild 级别 |
| Code Splitting | 按路由/动态 import 自动拆分 chunk | 自动 |
| CSS Code Split | 按路由拆分 CSS，异步加载 | 开启 |
| Asset Inline | 小资源（<4KB）转 base64 内联 | 开启 |
手动代码分割可以通过动态 import 实现：
构建完成后，用 pnpm run preview 启动本地静态服务器预览 dist/ 产物。这能验证构建后的代码在生产环境是否正常运行，避免「开发没问题，上线白屏」的尴尬。
Webpack 于 2012 年由 Tobias Koppers 创建，是前端构建工具的「老前辈」。截至 2026 年 8 月，最新版本是 Webpack 5.108。虽然 Vite 已成为新项目首选，但大量存量项目（尤其企业级应用）仍在使用 Webpack，理解其配置结构仍是前端工程师的必备技能。
Webpack 的核心设计理念是 「一切皆模块」：JS、CSS、图片、字体都是模块，通过 loader 转换，通过 plugin 扩展功能。与 Vite 的开发模式不同，Webpack 在开发时也需要打包（bundle），这是它启动慢的根本原因。
| 概念 | 作用 | 类比 Vite |
| Entry | 打包入口，构建依赖图的起点 | index.html 中的 script 标签 |
| Output | 产物输出路径和文件名 | build.outDir |
| Loader | 处理非 JS 文件（CSS、TS、图片） | 内置支持 + 插件 |
| Plugin | 扩展功能（压缩、HTML、环境变量） | plugins 数组 |
| Mode | development / production 开关 | 自动区分 dev/build 命令 |
一个典型的 Webpack 5 配置文件：
对比 Vite，Webpack 的配置更显式但也更繁琐。Vite 内置了 TypeScript、CSS、静态资源处理，Webpack 需要为每种文件类型手动配置 loader。这也是 Vite 开箱即用体验的核心来源。注意 Webpack 用 CommonJS 语法（require/module.exports），而 Vite 配置使用 ESM（import/export default），这反映了两个工具诞生年代的 JavaScript 模块系统差异。
两者并非简单的替代关系。以下从六个维度对比：
| 维度 | Vite 8 | Webpack 5 |
| 开发启动 | 毫秒级（不打包） | 秒-分钟级（全量打包） |
| HMR 速度 | <50ms（单模块） | 100ms-数秒（重打包） |
| 配置复杂度 | 低（开箱即用） | 高（手动配 loader/plugin） |
| 生态成熟度 | 快速增长中 | 极成熟（10年积累） |
| Module Federation | Vite 8 支持（Rolldown） | 原生支持（创始者） |
| 适用场景 | 新项目、中小型应用 | 存量项目、微前端大型架构 |
实际建议：新项目用 Vite（Next.js、Nuxt、SvelteKit 已默认集成），存量 Webpack 项目不必急于迁移——Vite 8 提供了兼容层（rolldown-vite 包），可先在 Webpack 项目中逐步引入 Vite 处理部分模块，再整体迁移。
修复：升级 Node.js 到 20.19+ 或 22.12+。推荐用 nvm install 22 切换版本，再用 nvm use 22 激活。
在 vite.config.ts 配了 '@': './src'，但 TypeScript 仍报「Cannot find module '@/components/Button'」。原因：Vite 和 tsc 是两套解析系统，需要同时配置。
修复：Vite 8 支持自动读取 tsconfig paths，在 vite.config.ts 中设 resolve.tsconfigPaths: true，或在 tsconfig.json 的 compilerOptions.paths 中同步配置别名。
构建后部署到 Nginx 子路径 https://example.com/app/，但 JS/CSS 资源 404。原因：Vite 默认 base 是 /，资源路径以根目录开始。
修复：在 vite.config.ts 中设置 base: '/app/'，构建产物中的资源路径会自动加上 /app/ 前缀。
Nginx 的 gzip 压缩在运行时进行，每次请求都消耗 CPU。用 vite-plugin-compression 在构建时预生成 .gz 文件，Nginx 的 gzip_static on 指令直接发送预压缩文件，省去运行时压缩开销。
pnpm create vite 创建一个 React + TS 项目，启动 dev server，修改 App.tsx 中的文本，观察 HMR 效果。pnpm run build，查看 dist/ 目录结构，对比 JS 和 CSS 文件大小与源码的差异。'@' 指向 src/，然后在组件中用 import Button from '@/components/Button' 测试。server.proxy，将 /api 请求代理到本地 FastAPI 后端（第 13 篇搭建的），验证前后端联调。React.lazy() 实现路由级代码分割，对比分割前后产物中 JS chunk 数量和体积变化。rollupOptions.output.manualChunks，手动将 React、ReactDOM 等第三方库拆分为独立 vendor chunk，分析首屏加载性能提升。构建工具解决了代码打包和开发体验问题，但代码质量怎么保证？下一篇将介绍前端测试的两大支柱：Vitest 做单元测试（验证函数和组件逻辑），Playwright 做 E2E 测试（模拟真实用户操作）。从「代码能跑」到「代码可靠」，测试是必经之路。