Есть ли какая-либо причина использовать загрузчик файлов при использовании url-загрузчика с параметром limit? - PullRequest
Новая
       22

Есть ли какая-либо причина использовать загрузчик файлов при использовании url-загрузчика с параметром limit?

1 голос
/ 14 марта 2019

Использование webpack-4

Насколько я понял, url-загрузчик будет работать так же, как и файл-загрузчик, если вы установите опцию limit (он использует ее под капотом), я заметил, что загрузка моего изображения была прервана, когда я использовал conf ниже 

{test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2|png|svg)$/, use: 'url-loader?limit=10000'}

{test: /\.(jpe?g|gif|bmp|mp3|mp4|ogg|wav|eot|ttf|woff|woff2|png|svg)$/, use: 'file-loader'}

когда я удаляю file-loader все работает нормально , url-loader ловит все **, что вам нужно. Несколько вопросов ниже:

  1. В приведенном выше conf файл-загрузчик нарушает поведение url-загрузчика (возможно, из-за того, что я не чётко указываю выходную папку) Я хорошо понимаю?

  2. в каких случаях вы действительно нуждаетесь file-loader?

  3. Каковы случаи, когда хорошо сделать комбинацию из обоих (если есть)?

1 Ответ

1 голос
/ 14 марта 2019
  1. В приведенном выше conf файл-загрузчик нарушает поведение url-загрузчика (возможно, из-за того, что я не чётко указываю выходную папку) Я хорошо понимаю?

При определении обоих загрузчиков вы будете иметь поведение обоих, то есть кодировать все файлы на месте в строки base64, когда их размер <10000 байт, и копировать их все в каталог дистрибутива. </p>

Вы были правы удалить объявление загрузчика file-loader, если вы хотите, чтобы поведение кодировалось как base64, если размер <10000 байт, или копировалось в папку распространения, если размер> 10000 байт.

Поскольку url-loader имеет параметр fallback, а его значение по умолчанию file-loader, второе объявление file-loader не требуется, если целевые файлы одинаковы для каждого загрузчика.

  1. в каких случаях вам действительно нужен загрузчик файлов?

Всякий раз, когда вы хотите скопировать файл в каталог dist и указать ссылку на местоположение этого файла в общем пути (откуда будут передаваться статические ресурсы; свойство publicPath webpack conf) в вашем комплекте приложения. Например, если вы настроили file-loader для копирования изображений и назвали их [hash].[ext], вы можете сделать: 

const img = require('avatar.jpg')
console.log(img) // => /public/[hash].jpg
  1. В каких случаях полезно комбинировать оба варианта (если есть)?

Используйте оба, если у вас есть файлы, которые вы всегда хотите скопировать (file-loader), и файлы, которые вы, возможно, захотите закодировать в файлы комплекта (url-loader). Будьте осторожны, чтобы не использовать одинаковые типы файлов для обоих загрузчиков, иначе вы можете копировать файлы, которые также кодируются в ваши пакеты с помощью url-loader.

...