Base/Knowledges/Библиотека/Pet проекты/rspack-dev-server-waitpage.md

64 lines
2.6 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
Тип: Проект
Статус: Запущен
Название: rspack-dev-server-waitpage
Описание: npm-пакет, отображающий прогресс сборки в браузере для rspack (аналог webpack-dev-server-waitpage)
Начат:
Завершён:
Технологии:
- TypeScript
Теги:
- npm
- rspack
- webpack
- dev-server
- tooling
Репозиторий: https://github.com/ksv741/rspack-dev-server-waitpage
Ссылка: https://www.npmjs.com/package/rspack-dev-server-waitpage
---
# rspack-dev-server-waitpage
[![npm downloads](https://img.shields.io/npm/dm/rspack-dev-server-waitpage)](https://www.npmjs.com/package/rspack-dev-server-waitpage)
## 🎯 Проблема и цель
`webpack-dev-server-waitpage` показывает страницу с прогрессом сборки в браузере во время горячей перезагрузки — удобная фича для разработки. Однако он поддерживает только Webpack API v4, тогда как rspack реализует только Webpack API v5. Из-за этого несовместимости `webpack-dev-server-waitpage` не работает с rspack.
Цель: реализовать аналогичный пакет, полностью совместимый с rspack и Webpack API v5.
---
## 🔍 Аналоги
Существующие решения не подошли из-за жёсткой привязки к Webpack API v4.
| Проект | Ссылка | Почему не подошёл |
|--------|--------|-------------------|
| webpack-dev-server-waitpage | https://www.npmjs.com/package/webpack-dev-server-waitpage | Поддерживает только Webpack API v4, несовместим с rspack |
---
## ⚙️ Архитектура
**Стек:** TypeScript, rspack / Webpack API v5
**Ключевые решения:**
- Реализация через Webpack Plugin API v5 (хуки `compiler.hooks`)
- Инъекция HTML-страницы с прогрессом через middleware dev-сервера
---
## 📋 Функциональность
- [x] Отображение страницы прогресса сборки в браузере
- [x] Совместимость с rspack (Webpack API v5)
- [x] Публикация первой версии на npm
---
## 🧠 Что узнал / выводы
- Различия между Webpack Plugin API v4 и v5
- Механизм работы rspack с Webpack-совместимыми плагинами
---
## 🔗 Связанные заметки
- [[]]