webpack如何迁移到vite

在本文中我们将介绍如何将webpack升级到vite

简单介绍一下viet。

Vite它使用了ES模块开发，这意味着它可以只编译你正在修改的文件，而不是整个应用程序，大程度的提高了热模块替换的速度，在构建生产版本的时候，Vite使用了Rollup进行打包，Rollup是一个高效的ES模块打包器，可以生成更下的包，因为它可以有效的移出"死代码（未被使用的代码）"。且vite还预配置了Vue单文件组件，支持热模块替换等。

Vite与WebPack相比Vite速度上有很明显的提高。因为它只需要编译你正在修改的文件，WebPack在每次文件更改时都需要编译整个应用程序。vite预配置更多，相对比webpack更易于设置，但是灵活性相对来说就不如WebPack,兼容性方面的话可能也没有Webpack好，因为vite依赖于原生的ESM。

安装vite

npm create vite@latest

npm run dev

进行.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.cofige.vue

一般可能可能需要包含一些额外的配置。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 中， 将这些插件添加到你的 vite.config.js 文件的 plugins 数组中：

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

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

常用的 Webpack 插件及其在 Vite 中对应的替代方案如下：

• HtmlWebpackPlugin -> vite-plugin-html

HtmlWebpackPlugin 简化了创建用于提供 Webpack 打包文件的 HTML 文件。如果你在项目中使用 HtmlWebpackPlugin，Vite 有一个名为 vite-plugin-html 的插件，提供了类似的功能。你可以按以下方式安装它：

// npm install --save-dev vite-plugin-html
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 并行加载，从而加快页面加载速度。

// npm install --save-dev vite-plugin-html-purgecss
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
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提供了一些引人注目的优势。它的速度，无论是在服务器启动还是热模块替换方面，都能显著提高开发效率。它的配置简单明了，也是一种令人欣慰的选择，并且其设计时考虑了原生的ES模块和现代框架的兼容性，为未来做好了准备。

从Webpack过渡到Vite确实需要仔细的规划和测试，特别是考虑到插件替换或重构的因素。但是这种迁移的回报是相当可观的。Vite提供了一个更快、更简洁的开发环境，最终可以实现更加流畅和高效的开发工作流程。还可以考虑探索其他现代化的工具，如esbuild和Parcel，以找到最适合你项目需求的工具。

工具并不是最重要的，而是如何使用它来实现你的目标。Webpack、Vite、esbuild和Parcel都是出色的工具，旨在帮助你创建一流的Web项目，使用哪个工具取决于你的特定需求和约束条件。

注意事项

尽管vite中有着很多不错的新功能和优秀的地方，但是任何东西肯定都有着不一样的。与webpack相比，主要考虑因素就是第三方插件的生态系统
webpack有数十个核心/官方插件，以及可能达到数千由社区贡献的插件，这些插件在webpack使用的事件中逐渐发展起来，虽然vite对插件的支持非常好，但是你可能会遇到你所依赖的插件在vite中没有等效的版本，这可能成为你迁移的阻碍