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

前言：一种名为"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。看看为什么一开始嫌弃它的人，最后都成了"真香怪"。