一种名为“Webpack 调整工程师”的已故职业—

一种名为“Webpack 调整工程师”的已故职业—— Vite 与“零配备”的快乐

2026-01-19 00:57 tlnshuju 阅读(0) 评论(0) 收藏举报

前言：一种名为“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，里面大概长这样（这还只是冰山一角）：

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 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。