从Webpack v4迁移到Vite v4：多文件合并打包配置疑问

核心问题原因 #

你遇到的报错是因为Vite的lib模式要求entry必须是单个字符串路径，而直接给Rollup的input传数组时，默认会为每个入口生成独立chunk，无法直接合并成单个文件。要实现多文件合并打包，需要通过统一入口的方式处理。

具体解决方案 #

步骤1：创建统一入口文件 #

新建一个入口文件（比如src/entry.js），导入所有需要合并的JS文件：

// src/entry.js
// 导入你要合并的3个目标文件
import './js/some/folder/someName1.js';
import './js/some/folder/someName2.js';
import './js/some/folder/someName3.js';

// 如果需要对外暴露这些文件的导出内容，添加以下代码
export * from './js/some/folder/someName1.js';
export * from './js/some/folder/someName2.js';
export * from './js/some/folder/someName3.js';

步骤2：配置Vite（两种方式可选） #

方式一：通用场景（Rollup配置）

在vite.config.js中配置build.rollupOptions，指定输出路径和格式：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    // 自定义输出根目录
    outDir: 'your-target-outdir',
    // 开启压缩，确保生成.min.js格式文件
    minify: 'terser',
    rollupOptions: {
      // 指向刚才创建的统一入口文件
      input: './src/entry.js',
      output: {
        // 输出文件路径（相对于outDir）
        file: 'js/some/filename.min.js',
        // 根据需求选择模块格式：iife（浏览器全局变量）、umd（通用模块）、es（ES模块）
        format: 'iife',
        // 使用iife/umd格式时，需指定全局变量名
        name: 'YourGlobalModuleName',
      },
    },
  },
});

方式二：类库开发场景（Lib模式）

如果是构建前端类库，用lib模式配置更简洁：

import { defineConfig } from 'vite';

export default defineConfig({
  build: {
    outDir: 'your-target-outdir',
    minify: 'terser',
    lib: {
      entry: './src/entry.js',
      name: 'YourGlobalModuleName',
      // 直接指定输出文件名和路径
      fileName: () => 'js/some/filename.min.js',
    },
  },
});

步骤3：执行打包 #

运行vite build命令，即可在your-target-outdir/js/some/目录下得到合并后的filename.min.js文件。

内容的提问来源于stack exchange，提问作者Ahmed G