Currently I have a Vite project that buids a react app:

The Vite config looks like this:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';

// Vite config
export default defineConfig({
  plugins: [
    react(),
  ],
});

and it takes all the code from /src/main.tsx entry point and then generates an output like this:

dist/assets/index-[hash].js
dist/assets/index-[hash].css
dist/index.html

I do not have an index.html defined anywhere in fact it is auto generated and includes the important <script type="module" crossorigin src="/assets/index-CSOHzRbG.js"></script> and <link rel="stylesheet" crossorigin href="/assets/index-Lja8sGTP.css">.

Now I’d like to have an output like this:

dist/assets/index-[hash].js
dist/assets/index-[hash].css
dist/index.html
dist/my-other-script.js

Based on:

...
src/main.tsx
src/my-other-script.ts

I tried what chatgpt recommends which is to add a build rollup info like this:

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react-swc';
import { resolve } from 'path';

// Vite config
export default defineConfig({
  plugins: [
    react(),
  ],
  build: {
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'src/main.tsx'), // React app entry point
        contentScript: resolve(__dirname, 'src/my-other-script.ts'), // Content script entry point
      },
      output: {
        entryFileNames: (chunkInfo) =>
          chunkInfo.name === 'contentScript' ? 'content-script.js' : 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name].[hash].js',  // Ensure chunk files also have hashed names
        assetFileNames: 'assets/[name].[hash][extname]', // Hash assets (CSS, images)
      },
    },
    outDir: 'dist', // Output directory
    assetsDir: 'assets', // Folder for assets like CSS, images
  },
});

However, while that works for all the script. The .html file is not generated anymore, this is the new output:

dist/assets/index-[hash].js
dist/assets/index-[hash].css
dist/my-other-script.js

Do you know how to preserve the default bundling including the index.html generation intact but also have a separate flow bundling and outputting src/my-other-script.ts.

Thank you!