Чат Telegram
Группа ВКонтакте
Вебпак и загрузка стилей

Вебпак и загрузка стилей

Почти любое приложение использует стили и JavaScript скрипты. Однако если в приложениях без использования фреймворков вы знаете, как подключать стили, то в Symfony и в том же Laravel есть свои методы по подключению css и js файлов на проект. Давайте разберемся, что это за инструменты.

Установка и конфигурация

Для начала вы должны запомнить, что хорошей практикой считается хранить все стили в папке public, где чаще всего также находится точка входа в наше приложение. В Symfony есть функция asset, которая всегда смотрит в папку public, однако напрямую класть стили туда мы не будем. Вместо этого мы воспользуемся пакетом encore, webpack и npm. Если вы не слышали про webpack, то знайте, что это модуль, предназначенный для упаковки JavaScript и CSS файлов в один единственный файл, увеличивающий скорость загрузки стилей на проекте.

Для начала мы должны установить бандл Encore следующей командой:

Код доступен только после покупки курса по фреймворку Symfony 4.

После установки у вас появятся файлы package.json и webpack.config.js, а также папки assets, куда мы и будем класть наши стили, и node_modules - vendor для JavaScript библиотек.

Когда вы установите Encore, компилятор (если вы его используете) предложит установить пакеты из файла package.json. Для этого надо выполнить команду npm install. Если у вас ещё нет npm, вам надо будет его скачать.

Теперь мы установили все нужные пакеты для работы со стилями. Осталось сконфигурировать файл webpack.config.js, который будет брать стили из папки assets и компилировать их в папку public. Если вы посмотрите в файл webpack.config.js сейчас, то ничего не поймёте. Там и правда много лишнего кода. Мы напишем свой:

Во-первых, объявляем переменную Encore, куда включаем симфоневский пакет webpack-encore.

Код доступен только после покупки курса по фреймворку Symfony 4.

Дальше указываем директории, где будут храниться скомпилированные стили, а именно public/build:

Код доступен только после покупки курса по фреймворку Symfony 4.

Очищаем вывод перед компиляцией и указываем, что мы не на продакшене:

Код доступен только после покупки курса по фреймворку Symfony 4.

В следующих двух методах мы указываем, откуда брать стили и js-файлы и куда их класть. А именно, поскольку стили компилируются в public, как мы указали в setOutputPath, нам нет необходимости её указывать: мы указываем папку js и css, а также имя файлов без расширения (app), куда в итоге скомпилируется весь наш код.

Код доступен только после покупки курса по фреймворку Symfony 4.

В addEntry мы указываем js-файлы, в addStyleEntry - угадайте что.

Экспортируем модуль и готово:

Код доступен только после покупки курса по фреймворку Symfony 4.

В конечном итоге так будет выглядеть наш webpack.config.js:

Код доступен только после покупки курса по фреймворку Symfony 4.

Webpack на практике

Теперь вы можете попробовать добавить свои стили в assets/css/app.css. Когда вы это сделаете, вам нужно будет запустить webpack, но как это сделать? В файле package.json в корне проекта вы можете найти секцию scripts. Чаще всего вы будете использовать encore dev или encore dev --watch. Ключ watch означает, что вебпак будет следить за изменением стилей и сразу их компилировать. Если же запускать без ключа, вам придется каждый раз, когда вы измените стили, запускать команду encore dev.

Однако в корне проекта запустить эти команды не получится, потому что encore находится в node_modules/.bin/encore. Поэтому запускать вы можете так:

Код доступен только после покупки курса по фреймворку Symfony 4.

В консоли вы увидите надпись Running Webpack и сообщение об успешной компиляции. Теперь в папке public у вас появится папка build с папками css и js. И только после всего этого вы можете перейти в файл base.html.twig или любой другой шаблон и попробовать загрузить ваши стили:

Код доступен только после покупки курса по фреймворку Symfony 4.

Используем Bootstrap

Писать свои стили скучно, давайте будем использовать bootstrap, к тому же его возможностей хватит с головой для нашего проекта. Забудьте про CDN и скачивание вручную, просто выполните в корне проекта команду

Код доступен только после покупки курса по фреймворку Symfony 4.

Теперь в папке node_modules у вас появится папка bootstrap. Она будет подсвечена серым цветом в отличие от других, не особо нас интересующих папок и библиотек. Чтобы webpack увидел bootstrap, нам надо ему показать, куда смотреть. Для этого давайте отредактируем наш webpack.config.js:

Код доступен только после покупки курса по фреймворку Symfony 4.

Вторым аргументом методов addEntry и addStyleEntry идет простой массив, где мы через запятую перечисляем файлы, которые webpack должен будет скомпилировать в папку public. Запускаем ещё раз наш encore:

Код доступен только после покупки курса по фреймворку Symfony 4.

Все готово, теперь вы можете подключить один файл со стилями и один - c js, которые у вас лежат в public/build.

Код доступен только после покупки курса по фреймворку Symfony 4.

Как видите, это достаточно удобно: вам не надо подключать сотни файлов, все ваши стили компилируются в один!

loader
loader
Логические задачи с собеседований