В этой статье я собираюсь объяснить вам, как вы можете использовать webpack вместе с фреймворком Symfony для создания живого перезагружаемого веб-приложения с поддержкой SASS и ESNext.

Какая цель?

В конце концов, у вас будет проект Symfony, вы сможете использовать SASS и ESNext и видеть изменения скриптов и стилей прямо в браузере благодаря мощности webpack-dev-server.

Что тебе нужно?

  1. Базовые знания фреймворка Symfony
  2. Установщик или композитор Symfony
  3. PHP установлен на вашем компьютере или на виртуальной машине, на которой он установлен
  4. NodeJS + npm

1. Создание проекта Symfony

Первый шаг - создать базовый проект Symfony. Я использую версию 2.8. * Symfony, но это руководство, вероятно, будет работать с другими версиями.

Продолжайте и выполните следующую команду, чтобы настроить новый проект.

$ symfony новый демопроект 2.8

2. Настройка webpack

Webpack вместе со своим dev-сервером с нашими файлами скриптов и таблицами стилей. Поскольку мы стремимся использовать SASS для стилизации и ESNext для написания сценариев, необходимо установить довольно много пакетов узлов.

Выполните следующие команды в корневом каталоге вашего проекта, чтобы получить все необходимые пакеты.

$ npm init -y
$ npm i -D webpack webpack-dev-server babel-core babel-loader babel-preset-es2015 sass-loader css-loader style-loader node-sass extract-text-webpack-plugin

После установки этих пакетов нам нужно настроить файлы конфигурации webpack и babel. Так что продолжайте и создайте файлы .babelrc и webpack.config.babel.js в корневом каталоге. Конфиги должны выглядеть так:

.babelrc необходим, чтобы сообщить транспилятору babel, какие модули он должен использовать для преобразования кода в ECMAScript 5.

Примечание
Вы можете добавить больше предустановок, чтобы использовать дополнительные языковые функции, такие как async / await или декораторы. Посетите http://babeljs.io для получения дополнительной информации.

Конфигурация webpack предназначена для использования с webpack 1.x. Поскольку версия 2 webpack находится на грани выпуска, вам следует либо убедиться, что вы установили версию 1.x, либо даже лучше: перенести конфигурацию на 2.x, когда она будет выпущена.

Поскольку было бы слишком много, если бы я объяснил всю конфигурацию, вот некоторые вещи, на которые следует обратить внимание:

  • Скрипт точки входа <project_root>/web/js/index.js
  • Объединенные файлы обслуживаются с <project_root>/web/assets
  • Dev-сервер доступен через http://localhost:9000/
  • Таблицы стилей извлекаются из пакета скриптов и размещаются вместе с javascript.

3. Создание скриптов и стилей.

Поскольку наша среда готова, мы можем приступить к созданию файлов сценариев и стилей для нашего приложения.

Сначала создайте таблицу стилей <project_root>/web/scss/main.scss и поместите в нее несколько основных стилей, например body { background: red; }

Затем создайте файл <project_root>/web/js/index.js и поместите в него следующее содержимое.

Скрипт загружает только таблицу стилей и выводит базовое информационное сообщение.

Теперь вы можете запустить свой webpack-dev-сервер, набрав webpack-dev-server в консоли и зайдя на свой dev-сервер на localhost:9000/assets/bundle.js, чтобы увидеть свой скрипт, или localhost:9000/assets/style.css, чтобы просмотреть таблицу стилей.

4. Подключение к Symfony

Когда ваш сервер разработки запущен и работает, теперь мы можем использовать обслуживаемые файлы в проекте Symfony.

Первый файл, который вам нужно отредактировать, - это <project_root>/app/config/config.yml

Сделайте так, чтобы он содержал следующие строки, чтобы сообщить Symfony, где искать ресурсы. В нашем случае это будет наш dev-сервер.

framework:
  templating:
    assets_base_url: "http://localhost:9000"

Затем откройте <project_root>/app/Resources/views/base.html.twig, чтобы загрузить скрипты и стили.

В разделе заголовка добавьте таблицу стилей:

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

Файлы сценария должны перейти в конец основного раздела, чтобы загрузить сценарий горячей перезагрузки с webpack-dev-server, а также связанный с ним javascript.

<script src="{{ asset('webpack-dev-server.js') }}"></script>
<script src="{{ asset('assets/bundle.js') }}"></script>

Вот и все! Перейдем к самому лучшему.

5. Запуск проекта

Убедитесь, что сервер веб-пакетов запущен, затем запустите свой проект Symfony, набрав php app/console server:run в консоли.

Ваш сервер должен запуститься и быть доступен в localhost:8000.

Откройте URL-адрес в своем любимом веб-браузере и откройте консоль. Вы должны увидеть уведомление от webpack о том, что он ожидает изменений, внесенных в скрипты или стили, а также информационное сообщение от консоли, которое сообщает вам, что проект работает.

Внесение любых изменений в файлы js и scss приведет к перестройке webpack и автоматическому обновлению страницы веб-браузером.

Дайте мне знать, если в комментариях ниже есть какие-либо вопросы, и хорошо проводите время в своей новой продуктивной среде!

RH