如何从Webpack迁移到Vite

本文将介绍如何将前端web应用程序从 Webpack 升级到 Vite。

Vite 是最新的前端开发工具，其受欢迎程度和采用率都在大幅增长。可以查看下图中来自 npm 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 run dev

现在，在浏览器中导航到显示的 localhost URL。

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 dev

vite.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: `<script src="./inject.js"></script>`,
        },
    })
  ]
})

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 都是优秀的工具，至于使用哪种工具最好，则取决于你的具体需求和限制条件。

以上就是本文的全部内容，如果对你有所帮助，欢迎点赞、收藏、转发~