Migrating your React app from Webpack to Vite

2025-06-07

将你的 React 应用从 Webpack 迁移到 Vite

Vite 是什么？

Vite的维护者声称它是“下一代前端工具”。即时开发服务器、快速的热模块更新、便捷的配置、优化的生产构建——一切都已实现。

但是……Vite 的文档没有说明如何迁移现有的 Webpack 应用 🤷 别担心！在本指南中，我们将一起解决这个问题！

将您的 repo 更改为 ES 模块

在您的 中package.json添加以下条目：



  "type": "module",
Enter fullscreen mode Exit fullscreen mode

拥抱现代！拒绝传统！这就是我们选择 Vite 的原因！

安装 Vite 及其插件



npm i --save-dev vite @vitejs/plugin-react vite-plugin-simple-html
Enter fullscreen mode Exit fullscreen mode

或者



yarn add vite @vitejs/plugin-react vite-plugin-simple-html --dev
Enter fullscreen mode Exit fullscreen mode

替换脚本

在您的 中package.json，您可能会有类似以下的脚本：



  "build": "NODE_ENV=production webpack",
  "dev": "NODE_ENV=development webpack serve",
Enter fullscreen mode Exit fullscreen mode

build命令由npm run build或调用yarn build，为生产构建应用程序。dev命令启动开发服务器。

这些脚本需要替换为：



  "build": "vite build",
  "dev": "vite serve",
Enter fullscreen mode Exit fullscreen mode

除此之外，您还可以添加一个额外的命令：



  "preview": "vite preview"
Enter fullscreen mode Exit fullscreen mode

preview命令将启动一个运行为生产而构建的应用程序的服务器。

让我们运行开发服务器！



  vite v2.9.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use --host to expose

  ready in 261ms.
Enter fullscreen mode Exit fullscreen mode

👁👄👁 哇，真快。

教 Vite 根在哪里

如果你现在启动了开发服务器，Vite 会在项目的根目录中查找index.html。如果项目位于其他目录，Vite 将无法找到，而是会显示一个空白页面。

要解决此问题，您需要移动index.html到根目录，或者为 Vite 指定要查找的其他根目录index.html。就我而言，它位于src/index.html。

您可以通过在命令中添加根目录路径来实现这一点，如下所示：



  "build": "vite build src",
  "dev": "vite serve src",
Enter fullscreen mode Exit fullscreen mode

不过，你也可以通过在项目根目录中创建一个vite.config.js文件来实现这一点。反正你很快就会用到它，所以为什么不现在就创建一个，把所有的配置都放在一个地方呢？



import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src',
  build: {
    // Relative to the root
    outDir: '../dist',
  },
});
Enter fullscreen mode Exit fullscreen mode

配置vite-plugin-simple-html

现在 Vite 知道在哪里找到您的index.html文件，它将尝试解析它。

你可能会遇到和我一样的错误：

如何处理？我使用了HtmlWebpackPlugin的templateParameters选项将自定义标题和其他信息动态注入index.html文件，如下所示：



  <title><%= title %></title>
Enter fullscreen mode Exit fullscreen mode 


new HtmlWebpackPlugin({
  template: 'index.html',
  templateParameters: {
    title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
  },
}),
Enter fullscreen mode Exit fullscreen mode

值得庆幸的是，我们可以对 做同样的事情vite-plugin-simple-html。在您的 中vite.config.js添加以下内容：



import simpleHtmlPlugin from 'vite-plugin-simple-html';

export default defineConfig({
  // …
  plugins: [
    simpleHtmlPlugin({
      inject: {
        data: {
          title: env === 'production' ? 'My site' : `My site [${env.toUpperCase()}]`,
        },
      },
    }),
  ],
});
Enter fullscreen mode Exit fullscreen mode

将入口模块添加到您的index.html文件

至此，你的index.html文件应该可以正常使用了。但是应用程序仍然无法加载！

如果您使用过 Webpack，那么您可能还使用过html-webpack-plugin将<script>标签注入到您的入口模块中index.html。

Vite 不会自动注入这些标签。你需要自行添加。例如：



<script type="module" src="./index.jsx"></script>
Enter fullscreen mode Exit fullscreen mode

啊啊，好多了。有东西活过来了。

图片描述

配置@vitejs/plugin-react

好的，如你所见，我们还没有完成。我们需要进行一些配置@vitejs/plugin-react，使其能够与 React 兼容。

如果您仍在使用经典 JSX 运行时，您的应用此时可能已经加载完毕，但您仍然需要遵循以下步骤。此插件不仅可以处理自动 JSX 运行时（有了它，您无需在每个文件中手动导入 React），还可以添加快速刷新、启用 Babel 集成等功能。

将其添加到您的vite.config.js文件中，如下所示：



import react from '@vitejs/plugin-react';

export default defineConfig({
  // …
  plugins: [
    // …
    react({
      // Use React plugin in all *.jsx and *.tsx files
      include: '**/*.{jsx,tsx}',
    }),
  ],
});
Enter fullscreen mode Exit fullscreen mode

别名

此时，如果您使用了别名（例如，将 改为import Button from 'src/components/Button'）import Button from '../../../../../components/Button'，构建可能会失败。解决方法很简单！

Webpack：



  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src'),
    },
  },
Enter fullscreen mode Exit fullscreen mode

活力:



  resolve: {
    alias: {
      src: path.resolve(__dirname, 'src'),
    }
  },
Enter fullscreen mode Exit fullscreen mode

等一下，还是一样？🤔 没错！嗯，有点儿像。你还有更多选项可供选择，但大多数情况下，你的别名在复制过来后应该就能用。

静态文件处理

默认情况下，根目录中public的文件将在构建时被复制过来。如果你在其他地方有这些文件，你可以使用如下选项：publicDir



export default defineConfig({
  // …
  publicDir: '../public',
});
Enter fullscreen mode Exit fullscreen mode

SVG处理

如果您过去常常导入 SVG 图标而不是将其用作 React 组件，@cassidoo刚刚就此问题写了一篇有趣的文章- 请务必查看！

Babel 插件

您可能根本不需要 Babel，因为@babel/preset-env和@babel/preset-react没有用。

但有时 Babel 插件仍然有用。例如，有一个插件可以移除 PropTypes，让你可以稍微缩小打包体积；还有一个专门用于 styled-components 的插件，它可以通过添加组件显示名称等功能，让开发和测试更加轻松。

@vitejs/plugin-react会在这里派上用场，并提供babel选项。例如，要添加babel-plugin-styled-components插件：



    react({
      // …
      babel: {
        plugins: ['babel-plugin-styled-components'],
      },
    },
Enter fullscreen mode Exit fullscreen mode

问题process.env.*​

我process.env.NODE_ENV在应用程序中的很多地方都使用了它。这导致控制台中抛出了以下错误：



Uncaught ReferenceError: process is not defined
Enter fullscreen mode Exit fullscreen mode

在 Vite 中，您可以使用import.meta.env.*代替。例如，process.env.NODE_ENV可以替换为import.meta.env.NODE_ENV。

享受！

现在您应该看到由 Vite 提供支持的应用程序！

我们还没完工；在投入生产环境运行之前，我们还需要进行一些调整。关于这些，你需要等待本指南的第二部分。订阅即可收到通知！

清理

您可以安全地删除这些现在未使用的依赖项：

  • core-js（除非您直接使用它）
  • webpack（呃）
  • webpack-cli
  • webpack-dev-server
  • *-loader（例如babel-loader，style-loader）
  • *-webpack-plugin（例如html-webpack-plugin，mini-css-extract-plugin
  • @babel/preset-env
  • @babel/preset-react
  • @pmmmwh/react-refresh-webpack-plugin
  • react-refresh

webpack.config.jsWebpack 配置文件也可以被删除。

babel.config.js、、babel.config.json或者.babelrc都可以删除，前提是你没有在@vitejs/plugin-react配置中将其用作 Babel 配置。

缺少什么了吗？

您认为从 Webpack 迁移到 Vite 时，还有什么需要解决的常见问题吗？请在评论区留言！

文章来源：https://dev.to/wojtekmaj/migration-your-react-app-from-webpack-to-vite-inp
Devto 翻译
PREV
使用 React 进行拖放（无需库）修订版
NEXT
酶死了。现在怎么办？