Url-loader vs File-loader Webpack

Question

我试图弄清楚url-loader和file-loader之间的区别。 DataURl是什么意思？

  

url-loader的工作方式与文件加载器类似，但是如果可以返回DataURL   该文件小于字节限制。

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