【亲测免费】 将Webpack迁移到Vite的实战指南：使用`webpack-to-vite`

一、项目目录结构及介绍

在利用webpack-to-vite工具进行项目迁移前，了解原始的项目结构对理解迁移过程至关重要。不过，这里主要介绍迁移后的Vite项目典型结构：

• 根目录：
  • index.html: Vite应用的入口HTML文件。
  • vite.config.js: Vite的配置文件，负责定制构建和服务器行为。
  • src: 源代码目录，通常包含组件、页面和其他JavaScript或Vue文件。
  • public: 静态资源目录，存放不在编译过程中的静态文件。
  • 其他依赖项如node_modules, package.json, 和可能的.gitignore等标准文件。

迁移后，原本在Webpack配置中管理的内容（如公共路径、环境变量等）将被映射到Vite配置中。

二、项目的启动文件介绍

原始概念与变化

在Webpack项目中，启动通常是通过配置文件(webpack.config.js)和npm脚本完成的。迁移到Vite之后，启动变得简化，通常不需要手动配置复杂的脚本。

启动命令

• 使用webpack-to-vite后，新项目可以通过以下方式快速启动：

  # 直接使用npx命令
  npx @originjs/webpack-to-vite <项目路径>
  # 或全局安装后运行
  npm install @originjs/webpack-to-vite -g
  webpack-to-vite <项目路径>
  

• 迁移完成后，启动新Vite项目通常只需要：

  npm run dev
  

Vite自动处理热更新(HMR)，不再需要额外的启动配置指令。

三、项目的配置文件介绍

**Vite的配置文件vite.config.js**是核心，它涵盖了多种设置，包括但不限于：

• 基础配置：base用于指定公共路径。
• 入口点：无需像Webpack那样明确指定每个入口，Vite默认从src/main.js或src/main.ts开始。
• 插件：Vite支持的插件配置，比如Vue的支持(@vitejs/plugin-vue)，若迁移自Vue-CLI项目，则需特别关注Vue 2与Vue 3的兼容性配置。
• 环境变量：Vite支持环境变量注入，通常通过define配置来处理像process.env.VUE_APP_***这样的变量。
• 构建选项：如输出目录(outDir)、CSS提取(cssCodeSplit)等，类似于Webpack中的相应配置。
• 服务器配置：server.port、HTTPS支持和代理配置(proxy)等，迁移时需注意调整以匹配原有Webpack或Vue-CLI的devServer配置。

示例配置片段：

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
    base: '/',
    plugins: [vue()],
    server: {
        port: process.env.PORT || 3000,
    },
    build: {
        outDir: 'dist',
        sourcemap: true,
    },
});

此指南简要概述了从Webpack过渡到Vite的项目关键结构与配置要点，实际迁移过程中还需细致比对原有配置，并适当调整以适应Vite的工作流。