Горячая перезагрузка из нескольких просматриваемых приложений на одном порту

Question

Мы пытаемся выяснить, как заставить webpack выполнять горячую перезагрузку нескольких приложений за одним портом localhost. У нас есть система приложений single-spa (микро-интерфейс) на основе React в монорепозитории, управляемом Lerna. (Это очень ранняя стадия разработки, поэтому у нас пока нет доступных выделенных серверов, поэтому рекомендуемый подход single-spa для развертывания всего, кроме одного изменяемого приложения, невозможен.)

Наша структура каталогов выглядит так:

      source
  |--apps
  |    |--reactapp1
  |    |--reactapp2
  |    |--reactapp3
  |
  |--main
  |    |--dist
  |
  |--shared
       |--component1
       |--component2

• source — это корень монорепозитория Lerna (git здесь и т. д.)
• reactappX — довольно типичные приложения React.
• main — это корневая конфигурация single-spa (index.html, запуск, маршрутизация и т. д.)
• componentX — это различные повторно используемые пакеты, API, модели и т. д.

Что мы сделали, так это настроили все приложения и компоненты так, чтобы их выходные данные сборки отправлялись в , что позволяет нам использовать вызывать в основной папке и в каждом приложении и общей папке.

Однако для этого потребовалось добавить к команде serve, чтобы также обслуживать скомпилированные файлы .js из неосновных приложений и компонентов, и здесь, я думаю, начинаются проблемы.

Все служит исправно, и когда обновляется, веб-пакет перекомпилируется, и браузер перезагружается автоматически. Однако, если я изменю что-то вроде или же Я вижу, что наблюдатель веб-пакетов перекомпилирует, но серверный процесс не распознает, что .js изменился в . Приходится вручную обновлять браузер.

Есть ли разумно стандартизированный способ заставить это работать, или мы движемся в неправильном направлении?

(И прежде чем кто-либо скажет «не делайте этого» — мы понимаем, что это будет плохо масштабироваться по мере роста приложения, это только для поддержки начальной работы разработчиков. Мы находимся в большой корпоративной среде, и выделение серверов — это бесконечный беспорядок. документов, утверждений и бюрократии. В конце концов мы будем следовать рекомендуемой схеме развертывания большинства приложений и общих пакетов на выделенном сервере.)

Answer 1

Чтобы заставить работать перезагрузку страницы , мне нужно было только добавить --watch-content-baseпереключиться на мой процесс "обслуживания". В этот момент сценарий в моем вопросе автоматически перезагружает страницу при изменении любого из приложений. (Более полезная замена горячего модуля / HMR значительно сложнее и на самом деле не то, что нам нужно на этой ранней стадии.)

Сценарий обслуживания (запускается в «основном», приложении root-config с одним спа):

      "start": "webpack serve --content-base ../../main/dist --watch-content-base --mode=development --https --port 9000 --env isLocal=true"

Сценарий просмотра (без изменений, работает во всех других каталогах приложений):

      "watch": "webpack --watch --mode=development --env isLocal=true"

Это использует веб-пакет 4.45.0.