从Webpack到Vite：我们迁移了一个10万行代码的项目，总结了这7个坑

一、为什么要迁？我们当时的痛点

项目技术栈：React 18 + TypeScript + Ant Design + less。Webpack配置经过多人"迭代"，已经变得极其复杂：各种loader、plugin、alias、proxy，还有自定义的打包分析脚本。

痛点：

我们调研了Vite，开发服务器启动秒级、HMR极快、配置简单。决定迁移。

Webpack用process.env注入变量，Vite用import.meta.env。全局搜索替换容易遗漏，特别是第三方库中使用了process.env。

解决：用@vitejs/plugin-react自带的define配置，手动映射：

js 复制代码

// vite.config.js
export default defineConfig({
  define: {
    'process.env': process.env
  }
})

但这样会打包所有环境变量，有安全风险。建议只映射需要的：'process.env.API_URL': JSON.stringify(process.env.API_URL)。

Vite默认只支持ESM，但node_modules里有大量CommonJS模块。比如@ant-design/charts、moment等。

现象：提示Module not found或require is not defined。

解决：

js 复制代码

optimizeDeps: {
  include: ['@ant-design/charts', 'moment']
}

Webpack中我们用less-loader的modifyVars全局注入主题变量。Vite不支持这种写法。

解决：用vite-plugin-style-import或直接修改vite配置的css预处理器选项：

js 复制代码

css: {
  preprocessorOptions: {
    less: {
      modifyVars: { '@primary-color': '#1890ff' },
      javascriptEnabled: true
    }
  }
}

但这样只对组件库有效，自己写的less文件还需要手动@import全局变量文件。

代码中大量使用import(@/pages/${pageName}/index)动态导入。Vite要求动态路径必须静态可分析。

现象：构建时提示The requested module '...' does not provide an export named 'default'。

解决：改用const modules = import.meta.glob('./pages/**/index.tsx')，然后手动匹配。

Webpack的devServer.proxy和Vite的server.proxy配置方式不同，特别是路径重写和Cookie的secure选项。

解决：仔细对照文档，测试所有接口。我们花了大半天才把所有代理规则调通。

我们的项目是多页应用（多个入口）。Webpack用entry: { a: './src/a.tsx', b: './src/b.tsx' }，Vite原生不支持多页。

解决：使用vite-plugin-html或手动配置build.rollupOptions.input：

js 复制代码

build: {
  rollupOptions: {
    input: {
      a: resolve(__dirname, 'src/a.html'),
      b: resolve(__dirname, 'src/b.html')
    }
  }
}

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%

团队开发体验大幅提升，同事不再抱怨"等编译"。

如果你也在考虑迁移，几点建议：

Vite不是银弹，但它确实解决了Webpack在开发体验上的痛点。如果你的项目也深受启动慢、热更新卡顿的困扰，不妨一试。

你们团队在用Vite吗？迁移中遇到过什么坑？点个赞让更多需要的人看到。