Как развернуть необработанный файл JSON, который Webpack 4 рассматривает как разделенный модуль?

Question

Я не думаю, что это необычная проблема, но похоже, что ключевые слова приводят ко многим ложным срабатываниям. Я пытался найти «файл динамической конфигурации webpack», «загрузить файл JSON времени выполнения webpack» и многое другое. Я вижу много результатов для динамической настройки Webpack, но не так много для динамической настройки связанного приложения.

• Я хочу иметь файл конфигурации, который будет находиться в моем развертывании в виде необработанного JSON, то есть без среды выполнения Webpack или шаблонного модуля. Просто действительный файл JSON.

• Я хочу "импортировать" эту конфигурацию JSON в мой код так же, как если бы это был модуль, например, так:

  import config from './config.json'
  

• Я хочу, чтобы Webpack пропустил файл JSON из комплекта, но вставил любой необходимый код для асинхронного запроса и вставил config.json ожидание на сервере.

• Я хочу, чтобы Webpack игнорировал, существует ли ./config.json во время сборки, и просто с оптимизмом предполагал, что он будет в нужном месте во время выполнения.

• Мне бы очень хотелось, если бы я мог указать, что './config.json' является псевдонимом модуля, и чтобы Webpack скопировал файл с псевдонимами в правильное место (с именем config.json) в каталоге сборки.

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

externals: {
  './config.json': "require('./config.prod.json')",
},

но это не сработает в браузере, где require не существует.

Я попробовал эту конфигурацию без удачи. JSON все еще встроен в пакет:

resolve: {
  alias: {
    './config.json': path.resolve(__dirname, 'src/config.prod.json')
  }
},
optimization: {
  splitChunks: {
    cacheGroups: {
      config: {
        test: './config.json',
        chunks: 'all',
        name: 'config',
        priority: 100
      }
    }
  }
}

Я использую Webpack 4.

Answer 1

Короче говоря, вы не можете использовать

import config from './config.json'

По крайней мере, если это должно работать в браузере.
внешний пакет webpack сделает это возможным для приложения nodejs.

Что вам действительно нужно, так это обычный http-вызов.
Просто получите файл config.json с чем-то вроде fetch.

fetch('url/config.json')

Вы можете использовать copy-webpack-plugin , чтобы поместить конфигурацию в правильное место при компиляции webpack (но вы хотите этого, если есть изменения непосредственно в этом файле на сервере)