Webpack vs Vite：一个是“老黄牛”，一个是“猎豹”，你选谁？

你准备搭一个新项目，打开搜索引擎：“Webpack还是Vite？” 答案一半一半，你更懵了。今天我们就来场正面PK：Webpack像头任劳任怨的老黄牛，啥都能干，但起步慢；Vite像只猎豹，瞬间冲刺，但偶尔挑食。看完你就能拍板：我的项目，就该用那个！

前言

前端工具链的“内卷”从未停止。Webpack多年霸主，几乎成了“打包”的代名词。但Vite横空出世，以“快”为刀，砍向Webpack的软肋：开发服务器启动慢、热更新慢。

两者没有绝对好坏，只有合不合适。今天我们从开发体验、生产构建、生态、配置复杂度四个维度，来场硬核对比。

一、核心原理：一个全量打包，一个按需编译

• Webpack：开发时，从入口开始，递归分析所有模块依赖，打包成一个或多个bundle（哪怕你只用了一个组件，它也把你整个项目打包一遍）。启动慢，但随着项目变大越来越慢。热更新时，需要重新打包变更的模块及其依赖，可能还是慢。
• Vite：利用浏览器原生ESM（<script type="module">），开发时不打包，只启动一个静态服务器。浏览器请求哪个文件，Vite实时编译哪个文件（比如把JSX转成JS，把TS转成JS）。启动极快（毫秒级），热更新也只更新被改的模块，速度飞快。

比喻：Webpack像搬家公司的卡车，把整个房子家具先打包再运；Vite像快递员，你点一个包裹，他送一个。

二、速度实测：秒开 vs 等咖啡

Vite在开发体验上完胜。尤其大型项目，Webpack启动一次够你刷几条短视频，Vite眨眨眼就好了。

三、生产构建：Webpack还是稳

Vite开发时用ESM，但生产打包不用ESM（会产生太多请求），它底层用的是Rollup。Rollup对tree-shaking、代码分割也很强，但某些复杂场景（比如需要自定义打包逻辑的库）不如Webpack灵活。

Webpack经过多年打磨，插件生态极其丰富，任何你能想到的打包需求（比如特殊文件处理、自定义chunk分割、微前端），Webpack几乎都能找到现成方案。

结论：普通应用项目，Vite的生产构建够用；搞复杂库或需要精细控制打包，Webpack更成熟。

四、配置复杂度：Webpack劝退新手，Vite开箱即用

Webpack配置堪称“噩梦”。从零配置一个支持TypeScript、React、CSS Modules、热更新的项目，要写几十行甚至上百行。虽然官方有create-react-app等脚手架掩盖了配置，但一旦需要 eject 或自定义，头就大了。

Vite默认支持TS、JSX、CSS预处理器、热更新，配置文件极简。你需要做的只是：

// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

Vite还提供了create-vite脚手架，选择模板一键生成。

五、生态与兼容性：Webpack的护城河

Webpack的插件/loader生态是它的最大优势。比如：

• file-loader/url-loader 处理静态资源。
• raw-loader 导入文本。
• html-webpack-plugin 生成HTML。
• mini-css-extract-plugin 抽离CSS。
• webpack-manifest-plugin 生成资源清单。

Vite虽然也支持大多数常见需求（通过插件），但一些老旧的、小众的loader可能没有直接替代。不过对于绝大多数项目，Vite的插件生态已经足够。

另外，Vite要求浏览器支持ESM（现代浏览器都支持），但如果你需要兼容IE11，那不好意思，Vite官方不支持（需要额外插件且很麻烦），这时候Webpack是唯一选择。

六、实战选择：到底用哪个？

用Vite，如果：

• 新项目，没有历史包袱。
• 追求极致的开发体验（快！）。
• 不需要兼容IE11。
• 项目是常规SPA或静态站点。

用Webpack，如果：

• 项目已经用Webpack，迁移成本高。
• 需要兼容IE11。
• 用了大量Webpack专属插件或自定义loader。
• 项目是非常复杂的库，需要精细化控制打包。

七、未来趋势：Vite会取代Webpack吗？

短期不会。Webpack在大型企业级项目、复杂构建场景仍有优势。但Vite作为“下一代前端工具链”，已经被Vue、React等官方推荐。尤其在Vue生态，Vite已经是默认配置。

长期看，Vite会逐渐蚕食Webpack在新项目中的份额。但Webpack也不会坐以待毙，Webpack 5 已经改进了缓存和模块联邦，但启动速度这个底层设计问题很难根治。

八、迁移指南：从Webpack到Vite

如果你决定尝鲜，步骤很简单：

1. 用create-vite新建一个空项目，复制源码。
2. 将require改成import（如果之前用CommonJS）。
3. 把环境变量从process.env改成import.meta.env。
4. 找对应的Vite插件替代webpack loader。
5. 测试。

对于中小项目，半天就能完成迁移。

九、总结：没有最好，只有最合适

• Webpack：老黄牛，稳重、能干、啥都有，但动作慢、配置复杂。
• Vite：猎豹，快、轻盈、开箱即用，但偶尔挑食（生态稍弱、不支持IE）。

新个人项目、创业项目，无脑上Vite，享受飞一般的开发体验。大厂遗留项目、需要IE兼容，继续Webpack。两者可以共存，甚至可以在一个项目里用Vite开发，Webpack打包（不常见）。

选工具就像选对象，适合的才是最好的。现在你知道该怎么选了。