Webpack vs Vite

比较 Webpack 与 Vite 的差异。

前言

先看两者各自的定位，再对比开发体验与生产构建。

简介

Webpack

• 打包工具里历史最长、能力最全的之一；通过 loader / plugin 处理各类资源（转译、压缩、静态资源等）。
• 配置灵活但偏重：能精细控制打包图，也因此学习与维护成本更高。
• 开发与生产都以“构建依赖图并打包”为主路径（开发时常用 dev server + 内存输出）。
• 历史上主链路多在 Node 上跑 JS 打包；如今可用 SWC / esbuild 等加速，但整体仍偏“全量依赖图”模型。

Vite

• 2021 年前后兴起，由 Evan You（Vue 作者）主导，现已服务 Vue / React / Svelte 等多框架。
• 开发模式：依赖浏览器原生 ESM，按需编译浏览器真正请求到的模块；依赖预构建多用 esbuild，冷启动与 HMR 通常明显快于传统全量打包。
• 生产模式：默认用 Rollup（及持续演进的打包管线）产出优化后的产物；生产速度优势并不总是压过 Webpack，需按项目规模实测。
• 开箱配置相对轻，但真实项目里同样会有 alias、proxy、多页、库模式等配置。

差异

flowchart TB
    subgraph Webpack["Webpack 开发路径"]
        W1[入口] --> W2[构建完整依赖图]
        W2 --> W3[打包 / 转译]
        W3 --> W4[dev server 提供资源]
    end

    subgraph Vite["Vite 开发路径"]
        V1[启动 dev server] --> V2[浏览器按需请求模块]
        V2 --> V3[拦截请求 + 即时转换]
        V3 --> V4[原生 ESM 在浏览器执行]
    end

维度	Webpack	Vite
开发冷启动	通常需先处理较大依赖图	按需编译，一般更快
HMR	成熟，大项目也可能偏慢	边界清晰时通常更快
生产构建	生态与优化手段极多	默认 Rollup，体验现代；超大仓需实测
配置	灵活、偏复杂	默认简单，复杂需求仍要配
生态	loader/plugin 历史积淀深	社区与官方插件已很完善，不再是“只有官方插件”

开发模式

• Webpack：开发服务器常与打包流程绑定，改动可能牵动较大图的重新构建。
• Vite：文件变更后沿模块图找 HMR 边界，尽量只替换受影响模块；边界失效时会 full reload。

选型建议

• 新业务、中前端应用、重视本地 DX：多数情况 Vite 更省心。
• 历史 Webpack 基建深厚、特殊打包约束多、强依赖某类 loader 插件链：继续 Webpack 或渐进迁移往往更稳。
• 不必把二者对立成“大项目只能用 Webpack”：大型 monorepo 用 Vite / 混合方案的案例已经很多。

总结

Webpack 的强项是可控的打包模型与长期生态；Vite 的强项是开发期 ESM 按需编译带来的启动与 HMR 体验。生产构建要分开评估，不能简单说“Vite 生产一定更快”。结合团队栈与仓库规模选型，比背结论更重要。