How to Configure Multiple Entry Points in Vite

When migrating a project from Webpack to Vite, one of the common challenges is configuring multiple entry points. Webpack has straightforward support for multiple entry points through its entry object, but Vite requires a slightly different approach using Rollup under the hood. This article will show you how to configure multiple entry points in Vite, with detailed examples and tips for best practices.

Problem

Suppose your project has multiple entry points defined in a webpack.config.js file like this:

module.exports = {
  entry: {
    appSchool: './resources/school/app.js',
    appStudent: './resources/student/app.js',
    appAuth: './resources/auth/app.js',
  },
  // other configurations
}

You want to achieve the same functionality in Vite's configuration file (vite.config.js). Let's see how to do that.

Solution

In Vite, multiple entry points can be configured using Rollup's input option, which is accessible via build.rollupOptions in vite.config.js. Here's how to achieve this:

Using fileURLToPath and import.meta.url

The most common way is to define each entry point explicitly using fileURLToPath and import.meta.url. Here's the configuration:

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        appSchool: fileURLToPath(new URL('./resources/school/index.html', import.meta.url)),
        appStudent: fileURLToPath(new URL('./resources/student/index.html', import.meta.url)),
        appAuth: fileURLToPath(new URL('./resources/auth/index.html', import.meta.url)),
      },
    },
  },
})

Explanation

1. Input Files: The input property in rollupOptions defines your entry points. Each entry must point to an index.html file that links to its corresponding app.js file.
2. Paths: Use fileURLToPath and import.meta.url to resolve file paths dynamically.

Alternate Approach: Using resolve for Simplicity

If you prefer a cleaner configuration, you can use Node.js' path.resolve function:

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

export default defineConfig({
  plugins: [vue()],
  build: {
    rollupOptions: {
      input: {
        appSchool: resolve(__dirname, 'resources/school/index.html'),
        appStudent: resolve(__dirname, 'resources/student/index.html'),
        appAuth: resolve(__dirname, 'resources/auth/index.html'),
      },
    },
  },
})

Advanced Solution: Dynamically Configuring Entry Points

If you have many entry points and want to automate the configuration, you can use a glob pattern to detect all index.html files dynamically:

// vite.config.js
import { fileURLToPath } from 'url'
import glob from 'glob'

export default {
  build: {
    rollupOptions: {
      input: glob
        .sync(fileURLToPath(new URL('./resources/*/index.html', import.meta.url)))
        .reduce((acc, path) => {
          const name = path.match(/resources\/(.*)\/index.html/)[1]
          acc[name] = path
          return acc
        }, {}),
    },
  },
}

FAQs

1. Why does Vite require index.html files as entry points?

Vite serves and builds files differently from Webpack. It relies on index.html as an entry point to enable features like fast HMR and native ES module imports.

2. Can I use .js files directly as entry points?

Yes, you can. However, Vite will not generate index.html files for these entry points automatically. This is generally not recommended unless you're building a library.

3. What if I face issues with __dirname in ESM?

In ESM, __dirname is not defined. Use import.meta.url with fileURLToPath to resolve paths instead.