Url-loader vs File-loader Webpack

Question

I'm trying to figure out the difference between url-loader vs file-loader. What does DataURl mean?

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

Solution 1

url-loader will encode files to base64 and include them inline rather than having them loaded as separate files with another request.

A base64 encoded file may look something like this:

data:;base64,aW1wb3J0IFJlYWN0IGZ...

This would be added into your bundle.

Solution 2

Just wanted to add to Jens' anwer

file-loader will copy files to the build folder and insert links to them where they are included. url-loader will encode entire file bytes content as base64 and insert base64-encoded content where they are included. So there is no separate file.

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.

It's also important that you can specify size limit for url-loader. It will automatically fall back to file-loader for all files beyond this size:

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