Как заставить webpack генерировать Dynami c publicPath для ресурсов

Question

Я пытаюсь выяснить, как реализовать приложение MicroFrontend Host, которое сможет bootstrap одно или несколько приложений React, созданных с помощью веб-пакета. Для этого мне нужно заставить приложение загружать свои ресурсы с какого-то другого URL-адреса, а не только с использованием относительных путей.

В Webpack есть хорошая функция для установки пути публикации c: https://webpack.js.org/guides/public-path/ Однако есть некоторые ограничения:

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

Есть ли способ сделать такие публичные c url dynamici c для приложения, созданного с помощью веб-пакета? Я могу смириться с тем фактом, что мне придется вручную обновлять все URL-адреса в индексе. html, но затем все остальные ресурсы (изображения и т. Д. c) я хотел бы получить с какого-то другого URL. В целом это похоже на размещение всех ресурсов, сгенерированных веб-пакетом, на CDN и имеющих индекс. html все еще подается с веб-сервера с другим адресом.

Answer 1

Я думаю, что эта функция должна быть настроена на вашем внешнем сервере (nginx / apache / node), а не в веб-пакете.
Похоже, вам просто нужна конфигурация прокси для этого. Пример для webpack-dev-server, вы можете попробовать что-то вроде этого на localhost:

devServer: {
  proxy: [{
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app1/images': '/shared/images'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app2/images': '/shared/images'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app1/sounds': '/shared/sounds'}
    },
    {
      context: '/my/backend',
      target: `${PROTOCOL}://${HOST}:${PORT}`,
      pathRewrite: {'^/app2/sounds': '/path/to/cdn'}
    }]
}

Это псевдокод, не пробуйте это дома, но вы поняли.
Код и правила зависят на сервере вы выбираете конечно.

PS. Но это очень интересный вопрос, я постараюсь найти какое-то решение с помощью webpack.

Answer 2

У меня есть установка с той же сборкой приложения, которая использует разные корни на разных серверах. В моем случае On The Fly publicPath решает проблему, мне просто нужно настроить html с заменой сервера var и «исправить» мои записи в веб-пакете.

Мои записи похожи это, исправление должно быть загружено первым делом:

entry : {
    entryfile: [ "./fix-public-path.js", "./entryfile.js" ];
}

. / fix-publi c -path. js имеет следующее содержимое:

if (window.__PUBLIC_PATH__) {
  __webpack_public_path__ = window.__PUBLIC_PATH__; // eslint-disable-line
}

И мой индексный файл это первый сценарий в файле:

<script>
    __PUBLIC_PATH__ = "@SERVER_SIDE_PUBLIC_PATH@";
</script>

Никогда не тестировал замену @ SERVER_SIDE_PUBLIC_PATH @ на URL-адреса cdn, но я думаю, что это сработает.