Знакомимся с Vitejs. Портирование проекта, собираемого с помощью Webpack 5 на Vitejs | Vitejs config

Описание

Рассматриваем простейшую, но работоспособную конфигурацию сборки проекта с помощью Vitejs с подгрузкой стилей, изображений, горячей перезагрузкой модулей.

00:00 Вступление
01:00 Создаем папку для проекта и копируем файлы
01:40 Редактируем package.json
02:06 Открываем проект в среде разработки и создаем файл конфигурации и index.html
03:22 Установка пакетов
04:00 Пишем конфигурацию для Vitejs
06:31 Редактируем скрипты для запуска дев сервера и билда
07:07 Запускаем дев сервер и смотрим результат
08:05 Разбираемся что делает команда serve
09:21 Тестируем горячую перезагрузку модулей
10:05 Плагин алиасов
11:06 Как Vitejs работает с модулями в index.html
15:40 Заключение

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

Как подключить postcss autoprefixer:
https://youtu.be/TZN6dC7ZOs0

Полезные видео по настройке webpack:
Минимальная конфигурация - https://rutube.ru/video/3b4fa6ee81f53d9d79c3e5a7effc7002/
Настройка горячей перезагрузки - https://rutube.ru/video/2038b941c7380889b876da2b0724d6b8/
Настройка сборки css/scss + изображения + dev/prod сборки - https://rutube.ru/video/9cb2fea1f4c2fbff149063900201c869/
Модульный принцип конфигурации проекта - https://rutube.ru/video/2678e7bc5f07370e10495bcd2813c1b7/

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

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


#easyit #javascript #js #vitejs #vanillajs