从 Webpack 迁移到 Vite：配置映射、loader 与插件对应与常见坑

Webpack：所有模块都是「模块」，靠 loader 转换、plugin 编排
Vite：开发态浏览器自己解析 ESM，Vite 只做「单文件转换 + 裸模块重写」

// webpack.config.js（迁移前）
module.exports = {
  entry: { main: './src/main.ts' },
  output: { path: path.resolve(__dirname, 'dist'), filename: '[name].[hash].js', publicPath: '/' },
  mode: process.env.NODE_ENV === 'production' ? 'production' : 'development',
}

// vite.config.ts（迁移后）
export default defineConfig({
  base: '/',
  build: {
    outDir: 'dist',
    rollupOptions: {
      input: { main: resolve(__dirname, 'src/main.ts') },
      output: { entryFileNames: '[name].[hash].js' },
    },
  },
})

迁移动作：
  删除 babel-loader / ts-loader / css-loader / style-loader / file-loader 配置
  删除对应的 npm 依赖
  CSS 直接 import './x.css'
  资源直接 import img from './x.png'

// 保留 babel 的少数场景
export default defineConfig({
  plugins: [react({ babel: { plugins: ['babel-plugin-styled-components'] } })],
})

export default defineConfig({
  define: {
    __APP_VERSION__: JSON.stringify(process.env.npm_package_version),
  },
})

// webpack
resolve: { alias: { '@': path.resolve(__dirname, 'src') } }

// vite
export default defineConfig({
  resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } },
})

export default defineConfig({
  resolve: {
    extensions: ['.mjs', '.js', '.ts', '.tsx', '.json'],
    mainFields: ['browser', 'module', 'main'],
  },
})

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": { "@/*": ["src/*"] }
  }
}

Webpack：process.env.REACT_APP_API_URL
Vite：   import.meta.env.VITE_API_URL

// 迁移前
const api = process.env.REACT_APP_API_URL

// 迁移后
const api = import.meta.env.VITE_API_URL

import.meta.env.MODE      // 'development' | 'production'
import.meta.env.DEV       // 布尔
import.meta.env.PROD      // 布尔
import.meta.env.BASE_URL  // base 路径

// webpack
devServer: {
  proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true } },
}

// vite
export default defineConfig({
  server: {
    port: 5173,
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/api/, ''),
      },
    },
  },
})

// 错误：Vite 无法静态分析变量路径
const mod = await import(`./pages/${name}.tsx`)

// 正确：用 glob 预声明可能的路径
const pages = import.meta.glob('./pages/*.tsx')
const mod = await pages[`./pages/${name}.tsx`]()

export default defineConfig({
  optimizeDeps: { include: ['some-cjs-lib'] },
})

第一步：先在 CI 上跑一遍 Vite 构建，对比产物体积与 chunk 数
第二步：本地开发切到 Vite，保留 Webpack 作为生产构建兜底
第三步：解决运行时差异（require / CJS / 动态导入）
第四步：生产构建切 Vite，保留一个版本的观察期
第五步：删除 Webpack 配置与冗余依赖

webpack.config.js   → 保留
vite.config.ts      → 新增
两者共用同一份 src/，通过 npm scripts 区分：
  npm run build:webpack
  npm run build:vite

□ 已删除 babel/ts/css/file loader 相关依赖与配置
□ 环境变量已全量改为 import.meta.env.VITE_ 前缀
□ 别名在 resolve.alias 与 tsconfig.paths 两处都已配置
□ require / module.exports 已改为 ESM
□ 变量动态 import 已改为 import.meta.glob
□ CJS 依赖已加入 optimizeDeps.include
□ devServer 已映射到 server 与 proxy
□ 已在 CI 上对比两套构建的产物