Проверка правил модуля Webpack: сопоставление файлов, содержащих заданный параметр c

Question

Я хочу отобразить некоторые указанные c изображения в виде data-uri вместо ссылки на местоположение изображения. Для этого я использую url-загрузчик.

Вот мой HTML (шаблон мопса):

img.loading(:src="require('@/images/spinner.png?inline')")

И мой конфиг, связанный с веб-пакетом:

     {
        test: /\.(png|jpg|gif|svg|ico)\?inline$/,
        loader: 'url-loader',
        options: {
          limit: 135000,
          name: 'img/[name].[hash].[ext]',
          esModule: false
        }
      },
      {
        test: /\.(png|jpg|gif|svg|ico)$/,
        loader: 'file-loader',
        options: {
          name: 'img/[name].[hash].[ext]',
          esModule: false
        },

Другие изображения загружаются нормально, но встроенные нет. Могу ли я использовать такие параметры в имени файла?

Answer 1

resourceQueries может быть лучшей ставкой:

{
    test: /\.(png|jpg|gif|svg|ico)$/,
    resourceQuery: /inline/
    loader: 'url-loader',
    options: {
      limit: 135000,
      name: 'img/[name].[hash].[ext]',
      esModule: false
    }
  },
  {
    test: /\.(png|jpg|gif|svg|ico)$/,
    loader: 'file-loader',
    options: {
      name: 'img/[name].[hash].[ext]',
      esModule: false
    }

Обратите внимание, что оба правила будут обработаны, так как image.jpg?inline изображение будет соответствовать обоим правилам, поэтому вам придется настроить отдельный resourceQuery