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://rutube.ru/video/3b4fa6ee81f53d9d79c3e5a7effc7002/
Настройка горячей перезагрузки - https://rutube.ru/video/2038b941c7380889b876da2b0724d6b8/
Модульный принцип конфигурации проекта - https://rutube.ru/video/2678e7bc5f07370e10495bcd2813c1b7/

Самый простой способ установить nodejs:
https://rutube.ru/video/cdabf10ac57674ea11ef59bab0c42ef7/

Еще по JS:
https://rutube.ru/plst/605099


#easyit #javascript #js #webpack #vanillajs