javascript Url-loader vs File-loader Webpack
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/49080007/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Url-loader vs File-loader Webpack
提问by stackjlei
I'm trying to figure out the difference between url-loader vs file-loader. What does DataURlmean?
我试图找出 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.
url-loader 的工作方式与 file-loader 类似，但如果文件小于字节限制，则可以返回 DataURL。
回答by jens
url-loaderwill encode files to base64 and include them inline rather than having them loaded as separate files with another request.
url-loader将文件编码为 base64 并内联包含它们，而不是将它们作为单独的文件加载到另一个请求中。
A base64 encoded file may look something like this:
base64 编码的文件可能如下所示：
data:;base64,aW1wb3J0IFJlYWN0IGZ...
This would be added into your bundle.
这将被添加到您的捆绑包中。
回答by Gherman
Just wanted to add to Jens' anwer
只是想添加到 Jens 的答案中
file-loaderwill copyfiles to the build folder and insert links to them where they are included. url-loaderwill encode entire file bytes content as base64 and insert base64-encoded content where they are included. So there is no separate file.
file-loader将文件复制到构建文件夹并在包含它们的地方插入指向它们的链接。url-loader将整个文件字节内容编码为 base64，并在包含它们的地方插入 base64 编码的内容。所以没有单独的文件。
They are mostly both used for media assets such as images. Mostly images.
它们主要用于媒体资产，例如图像。主要是图片。
This technique may make page load faster because there are fewer http-requests to the server to download files.
这种技术可以使页面加载更快，因为服务器下载文件的 http 请求较少。
It's also important that you can specify size limit for url-loader. It will automatically fall back to file-loaderfor all files beyond this size:
同样重要的是，您可以为url-loader. file-loader对于超出此大小的所有文件，它将自动回退到：
{
test: /\.(png|jpg|gif)$/i,
use: [{
loader: 'url-loader',
options: {
limit: 8192 // in bytes
}
}]
}
