Creating Multiple Bundles

Is it possible to create multiple bundles same time? So my plan is separating frontend assets from backend assets.

Example

Frontend

laravel([
            'resources/css/frontend/app.css', 
            'resources/js/frontend /app.js',
        ]),

Backend

laravel([
            'resources/css/backend/app.css', 
            'resources/js/backend /app.js',
        ]),

Thank you!

[ercanertan]

@garbinmarcelo Unfortunately I couldn’t find any solution. I am keeping webpack with mix.

[garbinmarcelo]

may be with this?

https://laravel-vite.dev/guide/extra-topics/multiple-configurations.html

Hello, this is not the official package and everything indicates that it will be discontinued.

I managed to do it the following way, I created 2 files:

vite.config.js

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'public/build/web.hot',
            buildDirectory: 'build/web',
            input: [
                'resources/css/app.css',
                'resources/js/app.js'
            ],
            refresh: [
                'app/Modules/**',
                'resources/views/**',
                'public/**',
                'lang/**'
            ],
        }),
    ],
    server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true
        }
    }
});

vite.painel.config.js (in my case this is the admin)

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            hotFile: 'build/painel.hot',
            buildDirectory: 'build/painel',
            input: [
                'resources/painel/app.scss',
                'resources/painel/app.js'
            ],
            refresh: [
                'app/Modules/**',
                'resources/views/**',
                'public/**',
                'lang/**'
            ],
        }),
    ],
    resolve: {
        alias: {
            '@': '/resources/painel/js',
        },
    },
    server: {
        hmr: {
            host: 'localhost',
        },
        watch: {
            usePolling: true
        }
    }
});

package.json

"scripts": {
        "dev": "vite",
        "dev.painel": "vite --config vite.painel.config.js",
        "dev.all": "npm run dev && npm run dev.painel",
        "build": "vite build",
        "build.painel": "vite build --config vite.painel.config.js",
        "build.all": "npm run build && npm run build.painel"
    },

In my admin blade layout I use the following: @vite(['resources/painel/app.scss', 'resources/painel/app.js'])

To set the correct panel build folder I define it in the provider boot, for example:

public function boot()
    {
        ...
        Vite::useBuildDirectory('build/painel');
         ...
    }

Posts that helped me reach this result: https://github.com/innocenzi/laravel-vite/discussions/324#discussioncomment-4135369 https://github.com/laravel/docs/pull/8146#issuecomment-1315986922

The “useBuildDirectory” can be invoked in several ways as explained in the post, linked above.

Hope I helped in some way.