Слава Україні!

Laravel 9. Vite - тонкая настройка

Laravel 9. Vite - тонкая настройка, разделение скриптов по модулям и папкам Laravel Vite

Не раз сталкивался с таким случаем - при сборке проекта с помощью Vite все файлы стилей и скриптов для разных модулей (напр. backend, frontend) компилируются в единый файл. Хотелось видеть отдельную сборку для backend`a и frontend`a.

Для этого изменил структуру подпапок в папке resources. Вынес файлы стилей и скриптов в соответствующие подпапки.

resource

Теперь "причесываем" сам vite.config.js


    import { defineConfig } from 'vite';
    import laravel from 'laravel-vite-plugin';
    
    export default defineConfig({
        plugins: [
            laravel({
                // меняем папку сборки на assets
                buildDirectory: "public/assets",
                // входящие файлы для компиляции
                // указываем отдельно для backend`a и frontend`a
                input: [
                    'resources/sass/frontend/app.scss',
                    'resources/sass/backend/app.scss',
                    'resources/js/frontend/app.js',
                    'resources/js/backend/app.js',
                ],
                refresh: true,
            }),
        ],
        // опции для компиляции
        build: {
            // куда компилируем
            outDir: "public/assets",
            // генерировать manifest.json
            manifest: true,
            rollupOptions: {
                // опции для формирования пути и названий скриптов
                // разбивать по фрагментам
                // скрипты импортированных библиотек (точек входа)
                // компилировать в отдельные файлы
                output: {
                    chunkFileNames: 'js/[name]-[hash].js',
                    entryFileNames: 'js/[name]-[hash].js',
    
                    assetFileNames: ({ name }) => {
                        if (/\.(gif|jpe?g|png|svg)$/.test(name ?? '')) {
                            return 'img/[name]-[hash][extname]';
                        }
    
                        if (/\.css$/.test(name ?? '')) {
                            return 'css/[name]-[hash][extname]';
                        }
    
                        if (/\.(woff2?)$/.test(name ?? '')) {
                            return 'font/[name]-[hash][extname]';
                        }
                        
                        return '[name]-[hash][extname]';
                    },
                },
            }
        }
    });

В результате, после сборки, получаем такую структуру папок и файлов:

resource

Далее в главном шаблоне frontend`a (по умолчанию app.blade.php) прописываем:


<head>
    ...
    
    @vite('resources/sass/frontend/app.scss', 'assets')
    ...
</head>
<body>
    ...
    ...
    @vite('resources/js/frontend/app.js', 'assets')
</body>

Соответствующие записи (изменив пути) делаем в шаблоне backend`a.

Если же заглянуть в файл manifest.json, то мы увидим соответствия ресурсов скомпилированым скриптам:


"resources/js/frontend/app.js": {
    "file": "js/app-6edac705.js",
    "imports": [
      "_jquery-0e5c5a1e.js"
    ],
    "isEntry": true,
    "src": "resources/js/frontend/app.js"
},
"resources/sass/backend/app.scss": {
    "file": "css/app-c41831d1.css",
    "isEntry": true,
    "src": "resources/sass/backend/app.scss"
},
"resources/sass/frontend/app.scss": {
    "file": "css/app-324c0c2d.css",
    "isEntry": true,
    "src": "resources/sass/frontend/app.scss"
}

Важлива інформація

Міністерство оборони
України
з 24.02 по 21.04
втрати противника
орієнтовно склали:
459530 ( +950 ) особового складу
7229 ( +16 ) танків
13896 ( +23 ) бойових бронемашин
11719 ( +41 ) артилерійських систем
1046 ( +0 ) РСЗВ
767 ( +4 ) засоби ППО
348 ( +0 ) літаків
325 ( +0 ) гелікоптерів
15785 ( +68 ) автомобільної техніки
26 ( +0 ) кораблі / катери
2115 ( +6 ) крилаті ракети
9379 ( +38 ) БПЛА
1926 ( +8 ) спец. техніки
4 ( +0 ) установок ОТРК/ТРК
1 ( +0 ) war.submarines

Поиск