Url-loader vs File-loader Webpack

Я пытаюсь выяснить разницу между загрузчиком url-loader и файловым загрузчиком. Что означает DataURl?

Угловой загрузчик работает как файловый загрузчик, но может возвращать DataURL, если файл меньше байтового предела.

Ответ 1

url-loader будет кодировать файлы на base64 и включать их inline, а не загружать их как отдельные файлы с другим запросом.

Файл с кодировкой base64 может выглядеть примерно так:

data:;base64,aW1wb3J0IFJlYWN0IGZ...

Это будет добавлено в ваш комплект.

Ответ 2

Просто хотел добавить к ответу Йенса

file-loader скопирует файлы в папку сборки и вставит ссылки на них, куда они включены. url-loader закодирует весь байтовый контент файла как base64 и вставит кодированный base64 контент туда, куда он включен. Так что нет отдельного файла.

Оба они в основном используются для медиаресурсов, таких как изображения. В основном изображения.

Этот метод может ускорить загрузку страницы, поскольку к серверу загружается меньше http-запросов.

Также важно указать ограничение размера для url-loader. Он автоматически переключится на file-loader файлов для всех файлов, превышающих этот размер:

{
    test: /\.(png|jpg|gif)$/i,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192 // in bytes
        }
    }]
}