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

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

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

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

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

composer require encore

После установки у вас появятся файлы 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.

var Encore = require('@symfony/webpack-encore');

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

Encore

    .setOutputPath('public/build/')
    .setPublicPath('/build')

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

    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())

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

    .addEntry('js/app', './assets/js/app.js')
    .addStyleEntry('css/app', './assets/css/app.css');

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

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

module.exports = Encore.getWebpackConfig();

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

var Encore = require('@symfony/webpack-encore');

Encore

    .setOutputPath('public/build/')
    .setPublicPath('/build')

    .cleanupOutputBeforeBuild()
    .enableSourceMaps(!Encore.isProduction())

    .addEntry('js/app', './assets/js/app.js')
    .addStyleEntry('css/app', './assets/css/app.css');

module.exports = Encore.getWebpackConfig();

Webpack на практике

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

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

./node_modules/.bin/encore dev

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

<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">

Используем Bootstrap

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

npm install bootstrap

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

.addEntry('js/app', [
        './assets/js/app.js',
        './node_modules/bootstrap/dist/js/bootstrap.min.js'
    ])
    .addStyleEntry('css/app', [
        './assets/css/app.css',
        './node_modules/bootstrap/dist/css/bootstrap.min.css'
    ])

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

./node_modules/.bin/encore dev

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

<link rel="stylesheet" href="{{ asset('build/css/app.css') }}">
...
<script src="{{ asset('build/js/app.js') }}"></script>

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