前言：一种名为"Webpack 配置工程师"的已故职业
时光倒流几年，前端圈最"高贵"的岗位不是写 React 的，也不是写 Vue 的，而是**"Webpack 配置工程师"**。
那是一个黑暗的年代。你想写个 Sass？去配 sass-loader。想加载个图片？去配 url-loader 和 file-loader。想兼容 IE？去配 babel-loader 和一堆 Polyfill。
配置文件写得像天书一样长，正则表达式写得像乱码一样。一旦报错，找不到原因，只能对着屏幕发呆，心想："我就写个 Hello World，至于吗？还不如去楼下卖炒粉。"
最要命的是那个启动速度。早上来到公司，输入 npm run start，按下回车。然后你就可以去接水、泡咖啡、和前台聊两句天、上个厕所。回来一看，进度条刚走到 92%。
今天，我要告诉你：那个时代结束了。
如果你的新项目还在用 Webpack，那你就是在浪费生命。欢迎来到 Vite 的时代。
想想自己之前一夜一夜的学习webpack，心里感慨良多...
降维打击：Vite 为什么快得像"作弊"？
很多兄弟不理解，都是打包工具，凭什么 Vite 能秒开？
这就好比 "吃自助餐"。
🐢 Webpack (Bundler-based) 的逻辑：
它是**"打包派"**。
你一进餐厅（启动项目），厨师长（Webpack）说："你等着，我要把餐厅里所有的菜（整个项目的依赖、代码）全部炒好，装进一个巨大的盘子里（Bundle），然后才能端上来给你吃。"
哪怕你只想吃个花生米（访问首页），你也得等它把澳洲龙虾（后台管理页）炒好。所以项目越大，启动越慢。
⚡ Vite (Native ESM-based) 的逻辑：
它是**"点单派"**。
你一进餐厅，Vite 直接给你端上一杯水（秒启动服务器）。
你想吃花生米？（浏览器请求 home.js）。Vite 说："好嘞！"转身把花生米炸一下端给你。
你想吃龙虾？（路由切换到 /admin）。Vite 再去炒龙虾。
本质区别：
Vite 利用了现代浏览器原生支持 ES Modules (import/export) 的能力。它不需要打包，它只需要**"按需编译"**。
这就是为什么无论你的项目有 10 个文件还是 10000 个文件，Vite 的启动时间几乎都是 1 秒。
实战对比：从"配置地狱"到"开箱即用"
让我们来看看，为了支持 React + TypeScript + CSS Modules，你需要做些什么。
❌ Webpack 的噩梦配置：
你通常需要一个 webpack.config.js，里面大概长这样（这还只是冰山一角）：
javascript
module.exports = {
// 入口、出口...
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
use: 'babel-loader', // 还要去配 .babelrc
exclude: /node_modules/,
},
{
test: /\.css$/,
use: ['style-loader', 'css-loader'], // 顺序反了还会报错
},
{
test: /\.module\.css$/,
use: [
'style-loader',
{
loader: 'css-loader',
options: { modules: true } // 开启 CSS Modules
}
],
},
// 还有图片、字体、SVG... 写到想吐
],
},
plugins: [
new HtmlWebpackPlugin({ ... }),
new MiniCssExtractPlugin({ ... }),
// ...
]
};✅ Vite 的"零配置"体验：
你只需要一个 vite.config.ts：
import
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
});完了？ 对，完了。
- TypeScript？ 内置支持（用的是 esbuild，快到飞起）。
- CSS / CSS Modules / PostCSS？ 内置支持。
- Less / Sass？
npm add -D sass，装完就能用，配置都不用改。 - 图片 / JSON？ 直接 import，不用配 loader。
这就是 "零配置哲学" （Zero Config Philosophy）。不是说真的没有配置，而是工具的设计者帮你把 99% 的通用场景都配好了。你只关心写代码，别关心怎么打包代码。
避坑指南：迁移路上的"拦路虎"
虽然 Vite 很香，但如果你是老项目迁移，有几个坑要注意：
- 环境变量变了 ： Webpack 用
process.env.REACT_APP_XXX。 Vite 用import.meta.env.VITE_XXX。 这是为了区分，也是为了符合 ESM 标准。别在代码里傻傻地找process了，浏览器里没那玩意儿。 - index.html 挪位置了 ： Webpack 项目，HTML 通常在
public文件夹里。 Vite 项目，HTML 必须放在根目录 。因为它才是真正的入口，JS 是通过<script type="module" src="/src/main.tsx">引进去的。 - CommonJS 依赖： Vite 强依赖 ESM。如果你的老项目里用了一些上古时代的 npm 包（只提供 CommonJS 格式），Vite 会尝试预构建转换，但偶尔会失败。这时候可能需要手动配置一下 optimizeDeps。
总结：善待自己，远离等待
我见过太多开发者，守着那个 5 年前的 Create React App 项目不敢动，每次启动要等 3 分钟，热更新（HMR）要等 5 秒。
他们说："哎呀，Webpack 更稳，生态更好。"
兄弟，Webpack 确实是工业界的标准，但那是给库作者和架构师用的。 对于我们这种要快速出活、要早点下班的应用开发者来说，Vite 就是救世主。
省下的那几分钟等待时间，哪怕用来发个呆、看个技术博客（比如我的），也比盯着黑底白字的终端看来得有意义。
把 Webpack 扔进历史的垃圾堆吧，就像当年我们扔掉 jQuery 一样。
下期预告 ：配置搞定了，JS 写爽了，是不是该轮到 CSS 了？ 你是不是还在写
BEM命名法？是不是写个样式要在.js和.css文件之间切来切去？ 下一篇，我们来聊聊 "原子化 CSS"与 Tailwind。看看为什么一开始嫌弃它的人，最后都成了"真香怪"。