Как организовать большое приложение React в несколько узловых модулей с помощью Webpack 4

Question

У нас есть большое приложение React в комплекте с Webpack4. Он состоит из нескольких небольших приложений и сервисов, каждый из которых изолирован за собственным префиксом URL. Эти сервисы имеют общий макет, несколько компонентов React и главное меню.

https://largeapp.test/service1
https://largeapp.test/service2

На данный момент исходный код каждого сервиса размещен в отдельном каталоге под основным каталогом src / services:

largeapp/
    package.json
    webpack.config.js
    src/
        services/
            service1/
                ...
            service2/
                ...

Мы хотим реорганизовать код для управления основным приложением и каждой службой в виде пакетов npm, каждый со своим собственным git repo:

@largeapp/main/
    .git/
    package.json
    webpack.config.js
    src/

@largeapp/service1/
    .git/
    package.json
    webpack.config.js
    src/

@largeapp/service2/
    .git/
    package.json
    webpack.config.js
    src/

Каждый пакет будет экспортировать некоторые метаданные (имя, описание, значок, URL-ключ), чтобы мы могли создать панель мониторинга со ссылками на каждый сервис и одним или несколькими компонентами React:

export {
    metadata,
    Main,
    Sidebar
}

У нас нет опыта в организации такого большого приложения таким образом, поэтому у нас есть некоторые сомнения:

1. Общие пакеты: все наши пакеты должны иметь одинаковые версии React и некоторых других пакетов. Является ли использование внешних средств лучшим подходом?

2. Следите за изменениями в зависимых пакетах. Во время разработки мы хотим перезагрузить приложение в горячем режиме, если что-то меняется, неважно, происходит ли изменение в основном пакете или в пакете обслуживания. Может быть, есть какой-то подход, основанный на использовании npm link для упаковки папки? В каком-то смысле зависят два процесса просмотра веб-пакетов?