Webpack 5 Настройка сборки проекта с подгрузкой файлов css/scss/изображений | Webpack 5 Config

Описание

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

00:00 Вступление
00:30 Описание тестового проекта
03:33 Конфигурация для webpack
06:10 Список пакетов для установки
06:36 Запуск установки пакетов проекта
07:03 Первая сборка проекта разбираем полученный результат
08:41 Подключаем к проекту компонент и пересобираем проект
10:20 Изучаем стили после сборки проекта с подключенным компонентом
10:47 Подключаем файл стилей main .scss к проекту и смотрим результат
12:08 Разбираем как добавлять свои файлы css/scss стилей
13:15 Важные замечания по поводу порядка загрузки стилей в результирующий файл
14:45 Резюмируем информацию по организации и загрузке файлов css/scss
15:09 Загрузка файлов изображений, управление именами файлов после копирования
17:35 Настраиваем сборку для продакшена
19:05 Заключение

Исходные файлы проекта здесь:
https://github.com/easy-linux/webpack-configs/tree/main/examples/example3

Полезные видео по настройке webpack:
Минимальная конфигурация - https://youtu.be/unEl3Hezwpw
Настройка горячей перезагрузки - https://youtu.be/oOpzkF2nU0s
Модульный принцип конфигурации проекта - https://youtu.be/fnUqyWyG5kk

Самый простой способ установить nodejs на Linux и Mac:
https://youtu.be/gP4OPx2vBoc


#easyit #javascript #js #webpack #vanillajs