从Webpack到Vite：我们迁移了一个10万行代码的项目，总结了这7个坑
一、为什么要迁？我们当时的痛点
项目技术栈：React 18 + TypeScript + Ant Design + less。Webpack配置经过多人“迭代”，已经变得极其复杂：各种loader、plugin、alias、proxy，还有自定义的打包分析脚本。
痛点：
- 开发服务器启动：45秒起步，同事可以泡杯咖啡
- 热更新：改一行代码，等待3秒才刷新
- 生产构建：6分钟，CI经常超时
- 配置维护：没人敢动webpack.config.js，一动就崩
我们调研了Vite，开发服务器启动秒级、HMR极快、配置简单。决定迁移。
二、迁移过程与踩坑记录
坑1：环境变量不兼容
Webpack用process.env注入变量，Vite用import.meta.env。全局搜索替换容易遗漏，特别是第三方库中使用了process.env。
解决：用@vitejs/plugin-react自带的define配置，手动映射：
// vite.config.jsexportdefaultdefineConfig({define:{'process.env':process.env}})但这样会打包所有环境变量，有安全风险。建议只映射需要的：'process.env.API_URL': JSON.stringify(process.env.API_URL)。
坑2：CommonJS模块不兼容
Vite默认只支持ESM，但node_modules里有大量CommonJS模块。比如@ant-design/charts、moment等。
现象：提示Module not found或require is not defined。
解决：
- 先用
vite-plugin-commonjs（已废弃），官方推荐optimizeDeps.include：
optimizeDeps:{include:['@ant-design/charts','moment']}- 实在不行，在
build.rollupOptions中配置@rollup/plugin-commonjs。
坑3：less全局变量失效
Webpack中我们用less-loader的modifyVars全局注入主题变量。Vite不支持这种写法。
解决：用vite-plugin-style-import或直接修改vite配置的css预处理器选项：
css:{preprocessorOptions:{less:{modifyVars:{'@primary-color':'#1890ff'},javascriptEnabled:true}}}但这样只对组件库有效，自己写的less文件还需要手动@import全局变量文件。
坑4：动态导入路径问题
代码中大量使用import(@/pages/${pageName}/index)动态导入。Vite要求动态路径必须静态可分析。
现象：构建时提示The requested module '...' does not provide an export named 'default'。
解决：改用const modules = import.meta.glob('./pages/**/index.tsx')，然后手动匹配。
坑5：代理重写规则不一致
Webpack的devServer.proxy和Vite的server.proxy配置方式不同，特别是路径重写和Cookie的secure选项。
解决：仔细对照文档，测试所有接口。我们花了大半天才把所有代理规则调通。
坑6：多页应用配置
我们的项目是多页应用（多个入口）。Webpack用entry: { a: './src/a.tsx', b: './src/b.tsx' }，Vite原生不支持多页。
解决：使用vite-plugin-html或手动配置build.rollupOptions.input：
build:{rollupOptions:{input:{a:resolve(__dirname,'src/a.html'),b:resolve(__dirname,'src/b.html')}}}坑7：生产构建后路由404
Vite构建后，HTML中的资源路径默认是绝对路径/assets/...，如果部署在子目录下会404。
解决：设置base: './'（相对路径）或根据部署路径动态设置。
三、迁移后的收益
经过两周折腾，我们终于成功迁移。对比数据：
| 指标 | Webpack | Vite | 提升 |
|---|---|---|---|
| 开发服务器启动 | 45秒 | 1.2秒 | 37倍 |
| 热更新时间（首次） | 3秒 | 0.1秒 | 30倍 |
| 生产构建时间 | 6分20秒 | 1分50秒 | 3.4倍 |
| 配置文件行数 | 180行 | 45行 | -75% |
| 依赖安装大小 | 420MB | 380MB | -10% |
团队开发体验大幅提升，同事不再抱怨“等编译”。
四、迁移建议
如果你也在考虑迁移，几点建议：
- 评估项目复杂度：如果项目大量使用Webpack特有插件（如
DefinePlugin、ProvidePlugin），迁移成本高。 - 先跑demo：拿一个最小模块试水，验证可行性。
- 渐进迁移：不用一次性全切，可以先用Vite开发，生产构建仍用Webpack，逐步替换。
- 备好回滚方案：迁移期间保留原Webpack配置，出问题随时切回。
- 团队培训：Vite的HMR机制、环境变量、动态导入与Webpack不同，团队要统一学习。
五、最后
Vite不是银弹，但它确实解决了Webpack在开发体验上的痛点。如果你的项目也深受启动慢、热更新卡顿的困扰，不妨一试。
你们团队在用Vite吗？迁移中遇到过什么坑？点个赞让更多需要的人看到。