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: [
reactRefresh(),
antdViteImportPlugin(),
vitePluginHtml({
minify: true,
inject: {
injectData: {
title: 'vite-react-example',
injectScript: '', // publicDir作为根目录
},
injectOptions: {
filename: './index.html', // 模板页
}
},
}),
],
server: {
open: true,
port: 10010,
}
});
这里我们使用了vite-plugin-html插件作为html-webpack-plugin的替代方案，其中需要注意injectData和injectOptions选项，injectData可以方便的往我们的模板页中插入自定义数据，injectOptions可以指定模板页，还有其他配置项可以参考https://www.npmjs.com/package/vite-plugin-html 。相应的需要改造index.html页面：
<%- title %>
......
<%- injectScript %>