Vite多入口打包时如何配置多个入口文件并分别输出？

Question

在使用Vite进行多入口打包时，如何正确配置多个入口文件并分别输出到不同的目录或文件名是一个常见的技术问题。默认情况下，Vite是以单页面应用（SPA）为主要场景设计的，但通过修改`vite.config.js`中的`build.rollupOptions`选项，可以实现多入口配置。例如，使用`input`字段定义多个入口文件路径，并结合`output`字段设置对应的输出路径和文件名。然而，在实际操作中可能会遇到入口文件之间的依赖冲突、资源重复打包或输出文件命名不符合预期等问题。这些问题通常需要通过调整`rollupOptions`中的`chunkFileNames`、`entryFileNames`等参数来解决，同时确保各入口间的资源隔离与独立性。

Answer 1

1. 初识Vite多入口配置

Vite是一个现代前端构建工具，虽然默认设计为单页面应用（SPA），但通过调整配置文件`vite.config.js`中的`build.rollupOptions`选项，可以实现多入口打包。以下是基本的多入口配置方法：

    export default {
      build: {
        rollupOptions: {
          input: {
            main: './src/main.js',
            admin: './src/admin.js'
          }
        }
      }
    }
    

上述代码中，`input`字段定义了两个入口文件：`main.js`和`admin.js`。每个入口文件对应一个独立的构建流程。

2. 输出路径与命名规则

在多入口配置中，除了定义入口文件外，还需要明确输出路径和文件名。这可以通过设置`output`字段或使用`rollupOptions`中的`entryFileNames`和`chunkFileNames`参数来完成。

参数	作用
`entryFileNames`	定义入口文件的输出命名规则，例如`assets/[name].js`。
`chunkFileNames`	定义动态导入或共享依赖的输出命名规则，例如`assets/[name]-[hash].js`。

合理配置这些参数可以避免资源重复打包或命名冲突问题。

3. 入口间依赖冲突分析

在实际开发中，多个入口可能共享部分依赖库。如果处理不当，可能会导致以下问题：

• 依赖冲突：不同入口引入了同一库的不同版本。
• 资源冗余：相同依赖被多次打包到不同的入口文件中。

解决这些问题的关键在于合理配置`rollupOptions`中的`manualChunks`选项，手动划分代码块，确保依赖的复用性和隔离性。

    manualChunks(id) {
      if (id.includes('node_modules')) {
        return 'vendor';
      }
    }
    

4. 资源隔离与独立性保障

为了保证每个入口文件及其资源的独立性，需要从以下几个方面入手：

1. 确保`entryFileNames`和`chunkFileNames`的命名规则不重叠。
2. 通过`rollupOptions.plugins`添加自定义插件，拦截并优化资源加载路径。

以下是一个简单的流程图，展示如何通过配置实现资源隔离：

graph TD
            A[定义入口文件] --> B{是否存在依赖冲突}
            B --是--> C[调整manualChunks]
            B --否--> D[配置entryFileNames和chunkFileNames]
            D --> E[输出独立资源]