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

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

1. 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]

2. 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 предоставляет более мощные инструменты для управления ресурсами. Выбор зависит от ваших индивидуальных потребностей и предпочтений.