如何在Vite中实现类似Webpack多编译模式的多打包构建

Vite 支持通过导出配置数组的方式实现类似 Webpack 多编译模式的效果，完全能满足你针对不同脚本/库使用独立构建规则的需求。

具体实现方式 #

直接在 vite.config.js（或 .ts）中导出一个配置对象数组即可，Vite 会依次处理每个配置项，各自使用独立的构建规则（包括不同的 alias、插件、解析规则、输出目录等）。

示例配置 #

假设你需要分别构建主应用和两个不同规则的外部脚本：

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

export default defineConfig([
  // 主应用配置
  {
    root: './',
    build: {
      outDir: 'dist/main',
      rollupOptions: {
        input: {
          main: './index.html'
        }
      }
    },
    plugins: [vue()],
    resolve: {
      alias: {
        '@': '/src'
      }
    }
  },
  // 第一个外部脚本的独立配置
  {
    root: './libs/lib-a',
    build: {
      outDir: '../../dist/lib-a',
      rollupOptions: {
        input: './index.js',
        output: {
          format: 'umd',
          name: 'LibA'
        }
      }
    },
    plugins: [
      alias({
        entries: [{ find: '@utils', replacement: './utils' }]
      })
    ],
    resolve: {
      extensions: ['.js', '.ts']
    }
  },
  // 第二个外部脚本的独立配置
  {
    root: './libs/lib-b',
    build: {
      outDir: '../../dist/lib-b',
      rollupOptions: {
        input: './main.ts',
        output: {
          format: 'es'
        }
      }
    },
    plugins: [/* 针对 lib-b 的专属插件 */],
    resolve: {
      alias: {
        '@components': './src/components'
      }
    }
  }
])

关键注意点 #

• 每个配置项都是独立的完整 Vite 配置，可以单独设置 root、build、plugins、resolve 等所有参数，完全隔离各自的构建环境。
• 生产构建时执行 vite build 会自动遍历所有配置完成构建；若需要在开发模式下同时启动多个服务，可结合自定义脚本或 vite preview 实现。
• 若存在重复配置片段，可抽离公共配置对象，通过对象扩展运算符合并来减少代码冗余。

关于 Library Mode 的补充 #

你提到 Library Mode 不是解决方案，这点完全正确——Library Mode 是针对单一库的打包优化方案，而多配置数组是针对多个独立构建任务的处理，每个任务可以是应用、库、工具脚本等任意类型，灵活性远高于 Library Mode。

内容的提问来源于stack exchange，提问作者Kritidipto Ghosh