Vite: Configuring multiple entries and specific output structure

door

I finally made the move to Vite from Webpack on a few small apps. But I am trying to figure out a way to have a vite config for a parent directory that has the rest of the apps. This is the structure of the source files –

├── package.json
├── vite.config.js
└── app1
    ├── vite.config.js
    ├── index.html
    └── src
        ├── main.jsx
        └── ...
└── app2
    ├── vite.config.js
    ├── index.html
    └── src
        ├── main.jsx
        └── ...

and so on

The only need for such a parent directory with a config is to build all of the nested apps at once and get the below output structure –

├── dist
    └── app1
        ├── build.js
        ├── index.html
        └── assets
           ├── css, fonts and images files
    └── app1
        ├── build.js
        ├── index.html
        └── assets
           ├── css, fonts and images files

I am not able to get the config for the parent file right. After several modifications, thanks to the multipage app documentation and some resources online, this is where I’m at right now, but the output part in rollupOptions is still a miss –

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

const apps= ['app1', 'app2'];

const entries = {};
apps.forEach(app=> entries[app] = resolve(__dirname, `${app}/src/main.jsx`));

// https://vitejs.dev/config/
export default defineConfig({
    base: '',
    plugins: [react()],
    server: {
        host: 'localhost',
        port: 9015,
        open: true,
    },
    build: {
        rollupOptions: {
            input: { ...entries },
            output: {
                entryFileNames:'[name]/build.js',
                chunkFileNames: '[name].js',
                assetFileNames: '[name]/assets/[name].[ext]',
                manualChunks: undefined,
            },
        },
    },

    clean: true,
    outDir: resolve(__dirname, 'dist'),
});

I’d appreciate any help or pointers in getting the config right. Thanks in advance! And Vite is awesome!!

Plaats een reactie