Webpack 迁移 Vite 是构建理念切换：从“打包优先”转向“原生 ESM 优先”，需适配开发服务器、重写 vite.config.ts、替换 loader 为原生支持、调整环境变量与代理配置，并利用其按需编译和 HMR 优势。
从 Webpack 迁移到 Vite 并不是简单替换打包工具，而是切换构建理念：Webpack 是“打包优先”，Vite 是“原生 ESM 优先”。迁移核心在于适配开发服务器行为、调整构建配置、处理插件生态差异，并利用 Vite 的按需编译与 HMR 优势。
理解 Vite 的模块化基础：ESM 是默认，不再需要 babel-loader 或 ts-loader
Vite 原生支持 ES 模块（import/export）、TypeScript、JSX、CSS 预处理器等，无需额外配置 loader。浏览器直接通过 import 加载源码（开发时），构建时再由 esbuild（TS/JS）和 rollup（生产打包）处理。
- 删除
babel.config.js和ts-loader/babel-loader相关配置 - 确保
.ts文件导出使用标准 ES 模块语法（export default或export const xxx），避免module.exports - TypeScript 类型检查由
tsc --noEmit或volar+ IDE 完成，Vite 本身不执行类型检查
重写配置文件：vite.config.ts 替代 webpack.config.js
Vite 配置更简洁，以 JavaScript/TypeScript 对象为主，常见迁移项包括：
-
入口和 HTML 模板：Vite 默认查找
index.html作为入口，自动注入脚本；无需配置entry或HtmlWebpackPlugin -
别名（alias）：用
resolve.alias，格式为{ '@': path.resolve(__dirname, 'src') }，注意路径必须是绝对路径 -
环境变量：Vite 使用
.env文件，变量需以VITE_开头才注入客户端，如VITE_API_BASE；process.env不可用，改用import.meta.env.VITE_API_BASE -
代理配置：开发服务器代理写在
server.proxy中，格式为{ '/api': { target: 'http://localhost:3000', changeOrigin: true } }，非devServer.proxy
处理 Webpack 特有功能的替代方案
部分 Webpack 功能在 Vite 中需换思路实现：
立即学习“Java免费学习笔记（深入）”；
-
动态导入（code-splitting）：Vite 原生支持
import()，无需SplitChunksPlugin；路由级懒加载保持const Home = () => import('./views/Home.vue')即可 -
静态资源引用：Vite 将
src/assets/下文件视为模块，推荐用import logo from './assets/logo.png'；public 目录下文件仍可通过/logo.png访问（不走构建流程） -
自定义插件：Webpack 插件大多不可直接复用。优先查找对应 Vite 插件（如
vite-plugin-svg-icons、@vitejs/plugin-vue）；必要时用 Vite 插件 API 重写，钩子如configureServer、transform、buildEnd -
DefinePlugin 替代：用
define选项做编译期常量替换，如{ __VERSION__: JSON.stringify('1.0.0') }，值会在构建时内联
构建与部署注意事项
Vite 构建基于 Rollup，输出结构略有不同：
- 构建产物默认输出到
dist/，含index.html和带哈希的资源文件；无需配置output.path - 若需修改 public 资源路径（如部署到子路径），设置
base: '/my-app/'，Vite 会自动修正index.html中的 script/style 引用 - SSR 或库模式需显式启用：
build.lib或ssr选项，不默认支持 - 构建时 CSS 提取由
build.cssCodeSplit控制，默认开启；如需合并为单个 CSS，设为false
