Простенький стартовый проект с Webpack.
Стэк: pug (jade), sass (scss), js.
А также плюшки, вроде Babel, postcss (normalize.css, autoprefixer), favicons webpack plugin, webpack dev server (с HMR).
- Установить Node.js
- Клонировать/загрузить этот репозиторий
- Установить зависимости проекта:
npm install
npm run dev # Сборка для разработки npm run build # Сборка для продакшн npm run start # Запуск веб-сервера
dist/ # Папка сборки
src/ # Исходники
components/ # Папка с блоками
button/ # Папка блока со всеми его стилями, скриптами и картинками
button.pug
button.scss
button.js
img/
picture.png
favicon/ # Фавиконка для проекта
favicon.png
fonts/ # Шрифты для проекта
font.woff
font.woff2
pages/ # Папка с шаблонами страниц
index.pug
scss/
global.scss # Основные стили проекта
normalize.scss # Импорт библиотеки postcss-normalize
variables.scss # Все переменные проекта
script.js # Точка входа вебпака
.browserslistrc # Поддерживаемые проектом браузеры (используется в Babel, postcss)
webpack.common.js # Общий конфиг
webpack.dev.js # Конфиг для разработки
webpack.prod.js # Конфиг для продакшн
Все assets внутри pug файлов подключаются через require:
img(src = require("path/to/asset/" + asset-name.png), alt = "photo")
Все assets внутри scss файлов поключаются через простое указание относительного пути:
background-image: url(path/to/asset/asset-name.png);
Конфиг webpack.dev.js содержит параметр target: "web", чтобы пофиксить проблему совместимости HMR и live reload dev server'а с 5-ой версией webpack'а.
В папку src/favicon достаточно положить одну иконку favicon.png, favicons webpack plugin сам сгенерит все нужные форматы, а также вставит ссылки на них в секцию head выходного html файла.
Данный пункт ни на что не влияет, но в целях единообразия все assets должны иметь имена в стиле lower-case-hyphenated. А каждая html страница содержать в разделе head метатеги, отвечающие за charset, viewport, description, keywords, а также иметь title и lang.