Vite 是最新的前端开发工具，其受欢迎程度和采用率都在大幅增长。可以查看下图中来自 npm trends 的下载。
trends
推动这一趋势的是 Vite 核心的一个关键概念：开发人员体验。与 Webpack 相比，Vite 在开发过程中能显著缩短构建时间和热重载时间。它通过利用浏览器中的 ES 模块等现代浏览器功能来实现这一目标。
在我们深入探讨从 Webpack 迁移到 Vite 的过程之前，值得注意的是，前端开发领域正在不断发展，Vite 并不是唯一受到关注的工具。esbuild 是另一款速度惊人的 JavaScript 捆绑程序和精简程序，正吸引着网络开发人员的目光。如果你正在寻找一种零配置的方法，你可能还想了解一下 Parcel，它为许多开发人员提供了无缝体验。
注意事项
虽然 Vite 为你的工作流引入了许多令人兴奋的新特性，但与任何新技术一样，也有一些缺点需要考虑。与 Webpack 这样成熟的工具相比，首先考虑的是第三方插件的生态系统。
在 Webpack 使用的十年间，npm 上有数十个核心/官方 Webpack 插件和数百（可能数千）个社区贡献的插件。虽然 Vite 的插件支持非常好，但你可能会发现，项目所依赖的插件并没有与 Vite 对应的插件，这可能会成为你迁移到 Vite 的障碍。
安装Vite
迁移项目的第一步是创建一个新的 Vite 应用程序，并探索要迁移到的工具。你可以用以下方法为新的 Vite 应用程序制作模板：
npm create vite@latest
npm create
然后开启开发服务：
npm run dev现在，在浏览器中导航到显示的 localhost URL。
localhost
Vite 将创建一个包含下图所示的文件目录。
Vite
其中许多内容你都不会陌生，可以在你的应用程序中进行类似替换。
更改package.json
要开始在现有 Webpack 项目中使用 Vite，请前往要迁移的 Webpack 项目的 package.json，然后安装 Vite：
npm install –save vite根据你使用的前端框架，你可能还需要安装特定的框架插件：
npm install –save @vitejs/plugin-react你还可以更新任何构建脚本，使用 Vite 代替 Webpack：
– "build": "webpack --mode production",
– "dev": "webpack serve",
++ "build": "vite build",
++ "dev": "vite serve",同时，卸载Webpack：
npm uninstall –save webpack webpack-cli wepack-dev-server现在再来试试新的开发脚本吧！
npm run devvite.config
除非你非常幸运，否则很可能需要添加一些额外的配置。Vite 使用 vite.config.js 文件进行配置，这在很大程度上类似于现有的 webpack.config.js 文件。
你可以在 vitejs.dev 上找到 Vite 配置的完整文档，但 React 应用程序的简单 Vite 配置可能如下所示：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
},
})插件
在插件内部，Vite 使用 Rollup 作为构建工具，你可以通过 npm 安装任何 Rollup 插件，将其添加到 Vite 中：
npm install –save @rollup/plugin-image同时将它们添加到 vite.config.js 文件的plugins数组中：
// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'
export default defineConfig({
plugins: [
image(),
],
})等价Vite插件
接下来看看一些流行的Webpack插件和等价的Vite插件。
HtmlWebpackPlugin -> vite-plugin-html
HtmlWebpackPlugin 可简化 HTML 文件的创建，以便为 Webpack 捆绑包提供服务。如果你在项目中使用 HtmlWebpackPlugin，Vite 的 vite-plugin-html 插件也能提供类似功能。你可以这样安装：
npm install --save-dev vite-plugin-html在vite.config.js中这样引入：
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createHtmlPlugin } from 'vite-plugin-html'
export default defineConfig({
plugins: [
react(),
createHtmlPlugin({
entry: 'src/main.js',
template: 'public/index.html',
inject: {
data: {
title: 'index',
injectScript: ``,
},
})
]
})MiniCssExtractPlugin -> vite-plugin-purgecss
MiniCssExtractPlugin 是 Webpack 的一个插件，用于将 CSS 提取到单独的文件中。它会为每个包含 CSS 的 JavaScript 文件创建一个 CSS 文件。它通常用于生产环境，以提高 CSS 的加载效率。这样做有两个好处。首先，浏览器可以单独缓存 CSS。其次，由于 CSS 不再嵌入 JavaScript 文件中，因此可以与 JavaScript 同步加载，从而加快页面加载速度，防止出现没有样式的文本。
在Vite中，可以使用vite-plugin-purgecss：
npm install --save-dev vite-plugin-html-purgecss在vite.config.js中这么使用：
import htmlPurge from 'vite-plugin-html-purgecss'
export default {
plugins: [
htmlPurge(),
]
}CopyWebpackPlugin -> vite-plugin-static-copy
CopyWebpackPlugin 用于将单个文件或整个目录复制到构建目录。Vite 也有一个类似的插件，名为 vite-plugin-static-copy：
npm install --save-dev vite-plugin-static-copy将下列代码放入vite.config.js：
import { viteStaticCopy } from 'vite-plugin-static-copy'
export default {
plugins: [
viteStaticCopy({
targets: [
{
src: 'bin/example.wasm',
dest: 'wasm-files'
}
]
})
]
}DefinePlugin -> define()
在 Webpack 中，DefinePlugin 用于在编译时用分配值替换源代码中的标记。这样就可以创建可在编译时配置的全局常量。在 Vite 中，你可以使用 vite.config.js 中的 define 选项实现同样的效果，因此可能不需要插件：
export default defineConfig({
define: {
'process.env.NODE_ENV': JSON.stringify('production'),
},
})总结
这是一份将前端 Webpack 应用程序迁移到 Vite 的简单指南，其中包括一些最常用的 Webpack 插件。
如果你的项目是一个大型复杂项目，构建过程错综复杂，Webpack 功能丰富、配置灵活，可能仍然是你的最佳选择。
如果你迁移的是一个较小或中等规模的项目，Vite 确实能提供一些便利。无论是服务器启动还是热模块替换，它的速度都能显著提高开发效率。其配置的简洁性也是一个受欢迎的优势，而且它在设计时考虑到了原生 ES 模块和现代框架的兼容性，这为它的未来发展奠定了良好的基础。
从 Webpack 过渡到 Vite 确实需要仔细规划和测试，尤其是在考虑插件替换或重构时。但这一举措也会带来可观的回报。Vite 提供了一个更快、更精简的开发环境，最终能带来更顺畅、更高效的开发工作流程。
时刻关注工具的发展变化总是有益的。也可以考虑探索其他现代工具，如 esbuild 和 Parcel，以找到最适合你项目需求的工具。
请记住，工具并不是最重要的，重要的是如何使用它来实现目标。Webpack、Vite、esbuild 和 Parcel 都是优秀的工具，至于使用哪种工具最好，则取决于你的具体需求和限制条件。
本文译自：https://www.sitepoint.com/webpack-vite-migration/
