Как использовать опцию имени в веб-пакете загрузчик файлов? - PullRequest
Новая
       56

Как использовать опцию имени в веб-пакете загрузчик файлов?

0 голосов
/ 07 апреля 2020

Context

Я хотел бы использовать опцию name загрузчика file-loader для указанного c изображения с именем thumbnail.jpg на моем веб-сайте, как при использовании ха sh для имени не работает для этого особого случая (я могу развить позже, если это поможет устранить неполадки).

В выходной директории файл генерируется загрузчиком, и он называется thumbnail .jpg , но он не содержит изображения, а скорее следующее содержание: module.exports = __webpack_public_path__ + "0492af74ba561cbe56f633f77cdb9293.jpg";

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

rules: [
            {
                test: /thumbnail\.jpg$/,
                use: {
                    loader: 'file-loader',
                    options: {
                        name: '[name].[ext]',
                    }
                }
            },
            {
                test: /\.(png|svg|jpg|gif|mp4|mp3)$/,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            esModule: false
                        }
                    }
                ],
            },

Я импортировать файл в один из js файлов проекта: import thumbnail from '../img/thumbnail.jpg' и создать фиктивный элемент тега img, используя thumbnail для атрибута sr c (хотя не уверен, если это необходимо).

Что я сделал до сих пор, чтобы исследовать проблему без успеха

  • Прочтите загрузчик do c
  • Посмотрите на загрузчик файлов Открытые проблемы
  • Добавьте следующую опцию: esModule: false

[Редактировать] Workarou nd (что может быть хорошим способом на самом деле ...) 

// ...
test: /\.(png|svg|jpg|gif|mp4|mp3)$/,
use: [
  {
    loader: 'file-loader',
    options: {
      esModule: false,
      name(resourcePath) {
        if (/thumbnail\.jpg$/.test(resourcePath)){
          return '[name].[ext]';
        }
        return '[contenthash].[ext]';
      }
    }
  }
]
// ...
...