【发布时间】：2018-08-11 07:27:24
【问题描述】：
我正在尝试找出 url-loader 与 file-loader 之间的区别。 DataURl 是什么意思？
url-loader 的工作方式与 file-loader 类似，但在以下情况下可以返回 DataURL 文件小于字节限制。
【问题讨论】：
标签： javascript webpack urlloader webpack-file-loader
【发布时间】：2018-08-11 07:27:24
【问题描述】：
url-loader 会将文件编码为 base64 并将它们包含在内，而不是将它们作为单独的文件与另一个请求一起加载。
base64 编码的文件可能如下所示：
data:;base64,aW1wb3J0IFJlYWN0IGZ...
这将被添加到您的捆绑包中。
【讨论】：
-
内联包含它们是什么意思？
-
这意味着您的 bundle.js 将有一个字符串，该字符串代表您通过
url-loader放置的资产所需的所有数据。这就是为什么他们让你设置一个限制，你不想对 200kb 的图像进行 base64 编码，因为它会使你的包大小增加那么多。这对小文件有好处，可以减少请求的数量。 -
谢谢詹斯！为了确保我正确理解这一点，file-loader 将您的文件加载到服务器上，然后在您的包中提供一个 url 或引用，以便您的客户端在运行您的包时可以找到它。 Url-loader 做同样的事情，但如果它足够小，它也可以让你的文件成为包本身的一部分，对吗？如果我是对的，那么 url-loader 会使文件加载器过时，对吗？由于 url-loader 为您提供了更多文件加载器为您提供的所有内容以及内联文件的选项
-
file-loader 与 url-loader 的使用是一个平衡问题。假设您有很多非常小的文件。每次浏览器请求这个文件时，它都需要一个完整的请求/响应，仅针对 .svg 的 500 字节。使用 url-loader，您可以确保将该文件捆绑到您的 .js 文件中，无论作为一个请求如何，都必须下载该文件。较大的文件会将
emitted放到您的网络服务器可以静态服务的目录中，这就是文件加载器的作用。平衡大小与请求数量。两者都有不同的用途。 -
是的，没错。在 url-loader 选项中，您可以确定文件大小阈值是多少。通常在 8KB 左右。任何比这更大的东西都将被视为文件加载器将使用单独的发出文件。
只是想补充一下 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
}
}]
}
【讨论】：
两个答案都很好，但我想进一步解释一下Data 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"
【讨论】：