Webpack迁移Vite不完全指北🔥

Vite想必大家已经耳熟能详，甚至已经上手把玩过了，但是肯定还是有很多玩家苦Webpack久矣，很多大型项目启动和打包速度异常缓慢，甚至修改完后的热更新都要一首歌的时间，下面给大家带来一篇项目从webpack迁移到Vite不完全指北，请大家细细品尝。

首先从下面图中可以看出Vite和webpack的下载使用量对比，可以看出webpack是下降趋势，Vite是上升趋势，但是两者的差距依然是很大的。

这种趋势的出现可以总结为 Vite 提供了一种快速、高效、可配置的开发环境，可以提高开发效率，减少开发成本，并且具有良好的开发体验。它通过利用现代浏览器功能（例如浏览器中的 ES 模块)来实现这一点。

迁移到Vite之前的注意事项

虽然 Vite 在工作流程中引入了许多令人兴奋的新功能，但与任何新技术一样，也有一些缺点需要考虑。与Webpack这样成熟的工具相比，首要考虑的将是第三方插件的生态系统。

npm 上有数十个核心官方Webpack 插件，以及数百个（可能是数千个）社区贡献的插件，这些插件是 Webpack 是用十年来开发的。虽然 Vite 的插件支持非常好，但您可能会发现自己的项目所依赖的插件没有 Vite 等效插件，这可能会成为迁移到 Vite 的障碍。

第一步：安装Vite和创建项目

迁移项目的第一步是创建一个新的 Vite 应用程序并探索要迁移到的工具。可以使用以下内容构建新的 Vite 应用程序：

npm create vite@latest

然后像这样启动开发服务器：

npm run dev

现在可以在浏览器里访问这个项目了。

Vite 将创建一个包含下图所示文件的目录。

其中许多是您所熟悉的，并且将在你自己的应用程序中进行类似的替换。

第 2 步：更改 package.json

要开始在现有 Webpack 项目上使用 Vite，在项目中要先安装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 代替 webpack.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

将它们添加到plugins的vite.config.js文件的数组中：

// vite.config.js
import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
      image(),
  ],
})

流行的 Webpack 插件及其 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'
        }
      ]
    })
  ]
}

定义插件 -> 定义()

在 Webpack 中，DefinePlugin用于在编译时将源代码中的标记替换为其分配的值。这允许你创建可以在编译时配置的全局常量。define在 Vite 中，可以使用中的选项达到相同的效果vite.config.js，因此你可能不需要插件：

export default defineConfig({
  define: {
    'process.env.NODE_ENV': JSON.stringify('production'),
  },
})

小结

如果你的项目是一个大型、复杂的项目，具有复杂的构建过程，那么 Webpack 功能丰富且灵活的配置可能仍然是你的最佳选择。

如果你要迁移较小或中等的项目，Vite 确实提供了一些引人注目的好处。其速度，无论是服务器启动还是热模块更换，都可以显着提高开发效率。其配置的简单性也是一个值得欢迎的喘息机会，它的设计考虑到了原生 ES 模块和现代框架兼容性，为未来做好了良好的准备。

从 Webpack 过渡到 Vite 确实需要仔细规划和测试，特别是在考虑插件替换或重构时。但这一举措的回报可能是巨大的。Vite 提供了更快、更精简的开发环境，最终可以带来更流畅、更高效的开发工作流程。