antd+react项目迁移vite的解决方案

antd+react+webpack往往是以react技术栈为主的前端项目的标准组合，三者都有成熟的生态和稳定的表现，但随着前端圈的技术不断革新，号称下一代构建平台vite2的发布，webpack似乎不那么香了，为什么这么说呢，因为vite太快了。经过一段时间的尝试，决定在项目中把webpack替换成vite试试，遂写成本文分享给大家。

Vite是什么

作为本文的主角，首先简单介绍一下vite这个构建工具，该工具是尤雨溪推出的【下一代前端开发和构建工具】，vite其实也不是一个新的工具，早在一年多以前，就已经推出了很多版本，直到2.x版本的推出，在前端圈引起了足够大的震动，标志着vite的成熟和强大，这里并不打算详细介绍vite，大家可以参考官网https://cn.vitejs.dev/ 了解。

迁移过程

了解了vite这款工具之后，我们就可以着手准备做迁移工作了；

1.安装vite依赖

npm i vite antd-vite-import-plugin @vitejs/plugin-react-refresh vite-plugin-html -D

2.更新项目原有依赖项

这里我们项目使用的是dva+antd3.x作为基础的开发框架，这里我将系统的主要依赖项都升级到了最新的版本，比如dva我用的2.6.0-beta.22版本，其他附带的react、react-dom、react-router-dom及@babel/plugin-transform-runtime等相关依赖项都更新了(antd还是3.x版本，暂未更新到4.x的大版本)，这一块取决于自己的实际需求；

3.项目根目录添加vite.config.js配置文件

和webpack的配置文件比起来，vite的简单了许多，而且很多功能都是内置的，比如对静态资源的处理，功能开启也比较简单，具体如下：

import { defineConfig } from 'vite';
import vitePluginHtml from 'vite-plugin-html';
import reactRefresh from '@vitejs/plugin-react-refresh';

export default defineConfig({
    css: {
        preprocessorOptions: {
            less: {
                javascriptEnabled: true,
            },
        }
    },
    publicDir: './src/configs',
    plugins: [