从 Webpack 到 Vite：构建工具换代指南

架构差异回顾

• Webpack：以入口为起点打包完整模块图，开发和生产都走打包；通过 loader 处理各类文件、plugin 介入构建生命周期，配置能力极强
• Vite：开发环境利用浏览器原生 ESM 按需编译，生产用 Rollup；依赖预构建交给 esbuild

差异决定了体验：Vite 的冷启动和 HMR 速度与项目规模基本无关，Webpack 在大型项目中需要持久化缓存、thread-loader 等手段苦苦优化。

迁移步骤

1. 安装依赖、加配置文件：vite.config.ts，配 @vitejs/plugin-vue
2. index.html 移到根目录：Vite 以 HTML 为入口，script 标签指向 /src/main.js
3. 替换环境变量：process.env.VUE_APP_X → import.meta.env.VITE_X
4. 替换 require 写法：require.context → import.meta.glob

// 批量导入模块的新写法
const modules = import.meta.glob('./views/**/*.vue') // 懒加载映射
const eager = import.meta.glob('./locales/*.json', { eager: true }) // 直接导入

5. 静态资源：require('@/assets/x.png') → new URL 或直接 import
6. 路径别名：resolve.alias 配 @
7. HTML 里的模板变量用 vite-plugin-html 替代

常见兼容坑

• CommonJS 依赖在 ESM 中的互操作问题，必要时配 optimizeDeps.include
• 依赖 Webpack 特定机制的库和脚手架插件要找替代
• CSS 预处理器、PostCSS 配置基本兼容，但语法细节要过一遍
• Webpack 的 module federation 在 Vite 中有对应方案但不成熟

什么情况继续用 Webpack

• 重度依赖 module federation、特殊 loader/plugin 生态的项目
• 需要兼容老旧浏览器且构建管线已稳定
• 超大项目的构建产物对 Rollup 的代码分割策略需要重新验证

建议

新项目无脑 Vite；存量项目选非业务高峰期迁移，先保证功能等价，再追求体验。迁移后记得同步更新 CI 缓存策略和 Docker 构建步骤。工具换代的核心收益是每天几十次 dev/HMR 的等待时间乘以团队人数——这笔账很值。