Url-loader 与 File-loader Webpack

Question

我正在尝试找出 url-loader 与 file-loader 之间的区别。 DataURl 是什么意思？

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

Answer 1

url-loader 将文件编码为 base64 并将它们内联包含，而不是将它们作为单独的文件与另一个请求一起加载。

base64 编码的文件可能如下所示：

data:;base64,aW1wb3J0IFJlYWN0IGZ...

这将添加到您的捆绑包中。

Answer 2

只是想补充 Jens 的答案

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
        }
    }]
}

Answer 3

两个答案都很好，但我想进一步解释数据 URL，请在此处查看 https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/Data_URIs，因此其格式为

data:[<mediatype>][;base64],<data>

例如，如果我转换一个 mp3 文件，它将如下所示，

import audio from '../assets/media/audio.mp3';
console.log('base64 of my audio: ', audio); 

//with url-loader setup
//I will get something like "data:audio/mpeg;base64,xxx"

Url-loader 与 File-loader Webpack

Url-loader vs File-loader Webpack

javascript

urlloader

webpack

webpack-file-loader