Symfony 5 как создать и подлкючить Assets?

Для создания и подключения ресурсов (Assets) в Symfony 5 вы можете использовать компонент Assetic или Webpack Encore.

Symfony Assetic:

Установите компонент Assetic с помощью Composer, запустив команду:

     composer require symfony/assetic-bundle

Добавьте бандл AsseticBundle в файле config/bundles.php:

     return [
         // ...
         SymfonyBundleAsseticBundleAsseticBundle::class => ['all' => true],
     ];

Создайте файлы с ресурсами (например, CSS и JS) в директории assets в корневой папке вашего проекта.

Определите группы ресурсов в файле config/packages/assetic.yaml, указав пути к файлам и типы фильтров:

     assetic:
         filters:
             cssrewrite: ~
         assets:
             css_group:
                 inputs:
                     - '%kernel.project_dir%/assets/css/main.css'
                 filters: [cssrewrite]
             js_group:
                 inputs:
                     - '%kernel.project_dir%/assets/js/main.js'

В вашем шаблоне Twig подключите ресурсы, используя функцию asset:

     {{ asset('bundles/assetic/css_group.css') }}
     {{ asset('bundles/assetic/js_group.js') }}

Перед развертыванием проекта запустите команду для установки ресурсов:

     bin/console assetic:dump [--env=prod]

Webpack Encore:

Установите Webpack Encore с помощью Composer, запустив команду:

     composer require symfony/webpack-encore-bundle

Создайте файлы с ресурсами (CSS, JS и т.д.) в директории assets в корневой папке вашего проекта.

Настройте файл webpack.config.js для определения точек входа и выхода ваших ресурсов:

     // webpack.config.js
     const Encore = require('@symfony/webpack-encore');

     Encore
         .setOutputPath('public/build/')
         .setPublicPath('/build')
         .addEntry('main', './assets/js/main.js')
         .addStyleEntry('styles', './assets/css/main.css')
         .enableCssLoader()
         .enableSourceMaps(!Encore.isProduction())
         .cleanupOutputBeforeBuild()
         .enableBuildNotifications()
         .enableVersioning(Encore.isProduction());

     module.exports = Encore.getWebpackConfig();

В вашем шаблоне Twig подключите ресурсы с помощью функций encore_entry_script_tags и encore_entry_link_tags:

     {{ encore_entry_script_tags('main') }}
     {{ encore_entry_link_tags('styles') }}

Перед развертыванием проекта запустите команду для компиляции ресурсов:

     yarn install
     yarn run encore dev [--env=prod]

Оба подхода позволяют вам создать и подключить Assets в Symfony 5. Подход с Assetic более прост в использовании, но менее гибок, в то время как Webpack Encore предоставляет более мощные инструменты для управления ресурсами. Выбор зависит от ваших индивидуальных потребностей и предпочтений.