Использовать глобальную ссылку как мой относительный импорт в сборке веб-пакета

Question

У меня есть внешний JS-проект, в котором я создаю свой выходной артефакт с помощью веб-пакета.

У меня есть несколько сред для развертывания с различными конфигурациями (URL API, языковые настройки и т. Д.). В настоящее время я создаю отдельные пакеты для разных сред, используя это в моем src/configs/config.js:

let environment = process.env.ENV;

if (!environment) {
  environment = 'local';
}

const env = require('./' + environment + '.js');
export default env;

и есть это в моей конфигурации производственной сборки:

new webpack.DefinePlugin({
  'process.env.ENV': JSON.stringify(process.env.ENV)
})

Поэтому в зависимости от моей переменной среды во время сборки будут создаваться разные артефакты.

Это прекрасно работает, но я должен 6 раз для моего пакета для 6 сред. Вместо этого я хочу развернуть 1 артефакт и настроить его как часть среды.

Самое простое решение - иметь отдельные файлы config.js, которые не являются частью пакета, ссылаются на тег script в моем index.html:

<script src="config.js"></script>

Это создаст глобальную переменную Config это может быть использовано приложением.

Однако я не хочу менять код приложения, поэтому я хочу настроить веб-пакет таким образом, чтобы при импорте src/configs/config.js он не включает его в комплект, но разрешает его как глобальную ссылку:

import configs from '../configs/config.js'; // relative reference


const x = configs.someApiUrl; // should come from window.Configs in a prod build

Я знаю, что webpack поддерживает Externals, который делает в основном то, что я хочу, но все примеры здесь для node_modules. мой config.js не там, но относительная ссылка. Может быть, это можно сделать с помощью синтаксиса функции, но как?

Что будет подходящим подходом для этого?