Frontend development

Как использовать webpack?

1. Если Вы просто хотите обработать js и scss файлы, то из корневой директории введите:

make deploy

2. Если Вы хотите воспользоваться Browser-Sync, откройте в любом редакторе файл по адресу public/assets/webpack.config.js и в 40-й строке (proxy: 'localhost',) замените localhost на свой личный домен локального сервера, где у Вас расположен проект (если у Вас всё по умолчанию, оставьте localhost).
3. Вернитесь в корневую директорию проекта. Введите:

make watch

Должен открыться браузер со страницей по адресу http://localhost:3000. После каждого изменения scss, js, php, tmpl страница будет перезагружаться, а файлы перекомпилироваться.

Примечание

1. В файлах js можно и нужно писать на es6(7, 8), бабель всё переделает в es5. Для каждой фичи делайте отдельным файлом в папке public/assets/js. Можно делать и отдельной папкой несколько связанных файлов. Далее в файл app.js делайте import './путь до Вашего файла без расширения'; Если вы хотите вызывать созданную Вами функцию на уже отрендеренной странице(например при нажатии кнопки - onClick=functionName()), то перед обьявлением функции присвайваете её window:

window.functionName = () => { ...

или

window.functionName = function() { ...

2. В папке scss все переменные хранятся в файле _template.scss. Если Вы создали новый отдельный scss файл,не забудьте в app.scss написать @import 'название Вашего файла без расширения';