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

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