Как загрузить внешний файл конфигурации в приложении Webpack-React, не связав его?

У меня есть веб-приложение, написанное с помощью React и связанное с Webpack. Приложение имеет конфигурационный файл JSON, который я хочу включить во время выполнения, а не в комплекте с веб-пакетом.

В моей точке входа для приложения я импортирую содержимое с помощью json-loader, но это заставляет файл быть встроенным в приложение, и я не могу обновить конфигурационный файл после его объединения.

Как я могу настроить файл webpack.config.js, чтобы исключить мой файл config.json, но все же позвольте мне импортировать его в мое приложение? Это не модуль, поэтому я не знаю, может ли он быть включен в раздел externals моего webpack.config.js

Я попробовал использовать require.ensure, но теперь я вижу содержимое config.json, связанное с файлом 1.1.bundle.js, и изменение файла конфигурации ничего не делает.

app.js

let config;
require.ensure(['./config.json'], require => {
    config = require('./config.json');
});

Ответы

Ответ 1

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

Я разместил это в верхней части моей <head> на странице ввода приложений с расположенным конфигурационным файлом.

<head>
    ... other scripts
    <script>
        var config= window.config|| {};
        $.getJSON('config.json', function(response) {
            config= response;
        });
    </script>
</head>
<body>
    <div id='root'/>
    <script src='dist/app.bundle.js'></script>
</body>

Ответ 2

Если ваш конфиг не настолько конфиденциальен, вы можете сделать это в своем index.html

<script>
  var initialState = {
    config: {
      idleTime: 120,
      fetchStatusInterval: 8,
      dataPath: 'somepath.json',
    },
  };
  window.__INITIAL_STATE__ = initialState;
</script>
<script src="static/bundle.js"></script>

И в вашем реагирующем приложении получите свою конфигурацию с помощью

const applicationInitialState = window.__INITIAL_STATE__;
const config = applicationInitialState.config;