Замените ссылки на изображения в файле json на данные в кодировке base64 с помощью веб-пакета

Question

Мне нужно создать легко настраиваемый веб-сайт, объединенный в один файл. Я использую webpack 4.x

Я создал файл json с «конфигурацией»

{
  "externals": [
    { "link": "http://lynda.com", "image": "./assets/lynda.jpg" },
    { "link": "https://www.mindtools.com/community", "image": "./assets/mindtools.jpg" },
    { "link": "https://www.ted.com/talks", "image": "./assets/ted.jpg" },
    { "link": "https://stackoverflow.com", "image": "./assets/stack.jpg" }
  ]
}

Я также настроил base64-inline-загрузчик в веб-пакете

  // {
  //   test: /\.(jpg|jpeg|png)(\?.*)?$/,
  //   use: 'base64-inline-loader?name=[name].[ext]'
  // },
  {
    test: /\.(jpg|jpeg|png)(\?.*)?$/,
    loader: 'base64-inline-loader',
    options: {
      name: utils.assetsPath('[name].[ext]')
    }
  },

Обе конфигурации выше не работали. URL-адреса, созданные в компоненте vue на основе данных json, по-прежнему относятся к файлу, и, конечно, эти ссылки указывают на 404 URL-адреса. Все остальные встроенные изображения для CSS и HTML обрабатываются правильно.

Я делаю что-то не так, но я не знаю, что это. Есть идеи?

Answer 1

Готово, но я не на 100% доволен этим разрешением.

Я переместил все данные из json в контроллер приложения с требованием

data() {
    return {
      externals: [
        { link: "https://lynda.com", image: require('./assets/lynda.jpg') },
        { link: "https://www.mindtools.com/community", image: require('./assets/mindtools.jpg') },
        { link: "https://www.ted.com/talks", image: require('./assets/ted.jpg') },
        { link: "https://stackoverflow.com", image: require('./assets/stack.jpg') }
      ]
    };
}

на сайте я использую классический url-загрузчик

test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'url-loader',
options: {
    // limit: 10000,
    name: utils.assetsPath('img/[name].[hash:7].[ext]')
}

все еще ищет нормальную возможность обработки файлов JSON