Как работает горячая перезагрузка (hot reload) на примере Vue CLI?

Vue CLI использует webpack-dev-server, который включает в себя Hot Module Replacement (HMR).

Процесс работы HMR для Vue выглядит так:

1. Запуск dev-сервера: При запуске npm run serve, webpack-dev-server поднимает сервер и начинает следить за файлами проекта.
2. Изменение файла: Когда разработчик сохраняет изменения в файле (.vue, .js, .css и т.д.).
3. Обнаружение изменений: webpack-dev-server обнаруживает факт изменения.
4. Пересборка модуля: Webpack пересобирает измененный модуль (например, компонент Vue).
5. Отправка обновления: Webpack-dev-server отправляет пакет обновлений (hotswap update) браузеру через WebSocket.
6. Применение обновления: Клиентская часть HMR (встроенная в код сборки), получив пакет, пытается применить его. Для Vue-компонентов это означает замену старого определения компонента на новое, сохраняя при этом текущее состояние экземпляров этого ком