Simple workflow

Стандартный шаблон верстки на webpack 5.

Начало работы

Установить пакеты через npm:

npm install

или yarn:

yarn

Команды

Для локальной разработки, используя webpack-dev-server:

npm run dev

Собрать для production:

npm run build

Запустить фейковый REST API с данными из файла data/json-server.json через json-server:

npm run json-server

Структура папок

cache

Используется плагином imagemin-webpack-plugin для кеширования уже минифицированных изображений. При повторных сборках плагин сначала проверит наличие кеша для каждой картинки. Если ее минимизированная версия уже существует в кеше, то она будет использована. Иначе картинка будет оптимизирована и записана в кеш для последующих сборок.

dist

Содержит собранный проект после выполнения команды build.

src

Все исходники проекта, за исключением папки node_modules. Это именно та папка, в которой вам нужно работать (изменять файлы). В корне этой папки лежит точка входа сборки - index.js и шаблон разводящей списка страниц - index.ejs.

data

Все файлы .json, данные из которых можно включить в шаблоны страниц через nunjucks-includeData.

js

Файлы скриптов, разбитые по папкам:

modules

Ваши кастомные скрипты, разбитые на модули и, как правило, импортируемые в app.js.

utils

Полезные утилиты и функции.

vendor

Скрипты сторонних разработчиков, которые не вынесены в npm пакет.

scss

Файлы стилей. Имена файлов должны совпадать с описываемыми в файлах классами. Подробнее - https://ru.bem.info/. Все файлы разбиты по папкам:

base

Глобальная конфигурация scss, включая переменные, миксины, функции, подключение шрифтов и т.д.

block

Файлы, описывающие стили одного отдельного блока на странице. Эти файлы импортируются автоматически.

layout

Файлы, описывающие стили основной разметки страниц. Импортируются автоматически.

section

Файлы, описывающие стили одной отдельной секции. Импортируются автоматически.

utils

Файлы, описывающие стили утилитарных классов. Импортируются автоматически.

vendor

Стили сторонних разработчиков, которые не вынесены в npm пакет.

static

Файлы, которые должны быть в корне сервера (/static/robots.txt будет доступен по адресу http://localhost:8081/robots.txt и после сборки будет находиться в /dist/robots.txt). Файлы копируются в корень с сохранением вложенности внутри папки static. По умолчанию содержат также шрифты и картинки.

templates

Файлы шаблонов шаблонизатора Nunjucks в формате .twig - для лучшей поддержки синтаксиса через IDE. Разбиты по папкам:

components

Переиспользуемые части контента, как правило, с входными параметрами. Похожи на функции в программировании - Nunjucks macros. Могут быть импортированы в другие шаблоны.

includes

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

layouts

Основная разметка страниц. Можно создать больше одной, например, для страниц с сайдбаром и без.

modules

Шаблоны, которые можно импортировать в другие шаблоны. В отличие от /templates/components/ не принимают никаких параметров.

pages

Шаблоны страниц. Новые страницы создаются в этой папке. Список страниц доступен по адресу http://localhost:8081 во время работы команды dev или в файле page-list.html в папке dist после выполнения команды build.

popups

Попапы сайта.

sections

Модули, логически объединенные в секции. Добавляются только напрямую в страницы.

vue-components

Все .vue компоненты.

Дополнительные возможности

Babel 7

Для компиляции js используется Babel. Файл конфигурации: babel.config.json.

Eslint

Используется для статического анализа .js и .vue файлов кроме папок node_modules и vendor. Файл конфигурации: .eslintrc.js.

Stylelint

Используется для статического анализа .scss и .vue файлов. Файл конфигурации: .stylelintrc.

Postcss

Используются postcss-плагины autoprefixer и cssnano. Файл конфигурации: postcss.config.js.