从Webpack迁移到Vite的指南

>本文指导您将前端Web应用程序从WebPack升级到Vite，这是一种迅速获得的Prontimity Frontend Development Tool。 Vite的使用速度大大更快，并且由于使用现代浏览器功能（例如ES模块）。 下图说明了Vite令人印象深刻的NPM下载增长。

图像源

> Vite在开发人员的体验中闪耀，请记住前端景观是动态的。 诸如同样快速的eSbuild和零孔菲格包裹之类的替代方案也值得考虑。

密钥点：

>
1. > vite的速度优势：本文详细介绍了从webpack迁移到vite的，强调了Vite使用现代浏览器功能的速度提高。
>
2. >逐步迁移：全面的指南涵盖了安装，配置调整和插件更换。 >
替代工具：
3. 在突出Vite的优势时，该文章承认潜在的迁移挑战（例如插件可用性），并引入了Esbuild和Esbuild and Parcel。
>在迁移之前：

>从成熟的Webpack生态系统迁移需要仔细的计划。 WebPack的广泛插件库可能会构成障碍；确保您的必要插件具有Vite等效。>

>

步骤1：探索vite

首先创建一个新的Vite项目：

<code class="language-bash">npm create vite@latest</code>

运行开发服务器：

>通过显示的local主机URL访问该应用程序。

<code class="language-bash">npm run dev</code>

>检查生成的目录结构（如下所示）。 许多文件将直接转移到您现有的项目中。>

>

步骤2：更新

> package.json>在您的WebPack Project的>中安装Vite和Framework特定插件（例如，用于React Projects）：

>

@vitejs/plugin-react>更新构建脚本：package.json

<code class="language-bash">npm install --save vite @vitejs/plugin-react</code>

>卸载webpack：

<code class="language-json">-  "build": "webpack --mode production",
-  "dev": "webpack serve",
+  "build": "vite build",
+  "dev": "vite serve",</code>

。

测试

<code class="language-bash">npm uninstall --save webpack webpack-cli webpack-dev-server</code>

步骤3：configuration（npm run dev）

> vite.config.jsvite使用（类似于WebPack的

）。 基本的React应用程序配置：

<code class="language-bash">npm create vite@latest</code>

>请参阅 https://www.php.cn/link/3abb5691502cbd522251147519f8a487有关综合文档

步骤4：插件

> Vite使用汇总。通过NPM安装汇总插件（例如，

），然后将它们添加到@rollup/plugin-image>：vite.config.js>：

<code class="language-bash">npm run dev</code>

>

流行的Webpack插件等效内容：>

• - ＆gt; ：HtmlWebpackPlugin>通过vite-plugin-html。 npm install --save-dev vite-plugin-html
- ＆gt;
• ：>通过MiniCssExtractPlugin。 vite-plugin-purgecss npm install --save-dev vite-plugin-html-purgecss - ＆gt;
：
• >通过。 CopyWebpackPluginvite-plugin-static-copy - ＆gt; npm install --save-dev vite-plugin-static-copyin
：
• >无需插件。> DefinePlugin define()vite.config.js结论：
>本指南提供了对从WebPack迁移到Vite的基本理解。 对于大型，复杂的项目，WebPack的广泛功能可能仍然可取。但是，对于较小的中型项目，Vite的速度和简化配置提供了很大的优势。 仔细的计划和测试至关重要，尤其是关于插件的替换。 探索Esbuild和包裹以获取更多选择。 最好的工具取决于您项目的特定需求。

> 关于Vite的FAQ

（包括在原始文本中，无需更改）

>

（原始文本的FAQ部分在此处保留，因为它相关且写得很好。）

以上是从Webpack迁移到Vite的指南的详细内容。更多信息请关注PHP中文网其他相关文章！