Использование загрузчика файлов Webpack для импорта файла stati c json дает путь к файлу вместо json содержимого

Question

Я пытаюсь использовать загрузчик файлов Webpack для копирования файла ресурсов stati c json в dist /, чтобы я мог импортировать этот файл json в компоненте Vue. js. Webpack правильно копирует файл, когда я запускаю npm run build, но когда я пытаюсь импортировать файл (например, import myJson from '@/static/runtimeConfig.json'), тогда переменная «my JSON» получает только путь к файлу, а не фактическое содержимое файла JSON. Может кто-нибудь помочь мне понять, почему это так?

Моя конфигурация загрузчика файлов в веб-пакете выглядит следующим образом:

module: {
      //load runtimeConfig.json file through a custom loader
      rules: [
        {
          // set the type to javascript/auto to bypass webpack's built-in json importing
          type: 'javascript/auto',
          test: /(runtimeConfig\.json)$/i,
          // file-loader resolves imports on a file and emits that file to dist/
          loader: 'file-loader',
          // use filename runtimeConfig.json instead of a hashed filename
          options: {
            name: '[path][name].[ext]',
            outputPath: 'static',
          }
        }
      ],
    },

Мое намерение - импортировать файл json в vue. js компонентов, например:

import myJson from '@/static/runtimeConfig.json'

Но после выполнения этого импорта мой Json - это просто путь к файлу, а не фактическое json содержимое

console.log(myJson)
--> /static/src/static/runtimeConfig.json

Answer 1

Это именно то, что делает file-loader - он копирует файл в dist и возвращает путь к файлу. Потому что он в основном используется для обработки содержимого атрибутов img href. Теперь вы можете загрузить его в запущенное приложение во время выполнения по запросу ajax, используя указанный путь ...

Если вы просто хотите включить файл JSON в свое приложение как объект, вы можете просто импортировать это без какой-либо конфигурации Webpack, и он будет импортирован как JS объект и включен в ваш JS комплект. Это происходит в время сборки