Add Encore.configureUrlLoader() method to the public API

[Lyrkan]

This PR adds a configureUrlLoader() method to the public API in order to allow the use of the url-loader instead of the file-loader for images and fonts (closes #295).

Usage:

// Enable the url-loader for both images and fonts
Encore.configureUrlLoader({
    images: {
        limit: 8192,
        mimetype: 'image/png'
    },
    fonts: {
        limit: 4096
    }
});

// Enable the url-loader for images and implicitly
// disable it for fonts (by omitting the "fonts" key)
Encore.configureUrlLoader({
    images: {
        limit: 8192,
        mimetype: 'image/png'
    }
});

// Enable the url-loader for fonts and explicitly
// disable it for images (by using a falsy value
// for the "images" key).
Encore.configureUrlLoader({
    images: false,
    fonts: {
        limit: 4096
    }
});

[stof]

the file-loader options must be combined with the url-loader options. Otherwise, we won't have the right config in case the url-loader fallbacks to the file-loader for bigger files.

[Lyrkan]

Definitely, should be good now!

[stof]

should it actually be a requirement for everyone using Encore ? This is an opt-in feature.

[Lyrkan]

Yep, I hesitated a bit on that one but ended-up adding it as a main dependency without any good reason.

I moved it to dev dependencies and added the usual ensurePackageExist checks.

[weaverryan]

Can you also create PR on the docs? Because, this will definitely be merged :)

[weaverryan]

Yay for validation :)

[Koc]

@Lyrkan thank you so much for this PR

[weaverryan]

Thank you @Lyrkan! I've wanted this feature for awhile :)

[Lyrkan]

I'll try to add some doc for it next week!

[simensen]

👍 so awesome this made my night. :)

[javiereguiluz]

@Lyrkan thanks for volunteering to write some docs about this. Reading the examples of the descriptions, these are my main doubts:

• Is the mimetype of image optional? If I don't define it, would it inline all image formats? Can I define multiple formats in an array or is this option always a string? How is mimetype detected and what about edge cases where the mimetype is wrongly detected? (I didn't follow the discussion, but using the file extension instead of the mimetype would be simpler for all: extension: 'svg', extension: 'png', etc.)
• The size limit in font ... is it per font family or per font file? If a font defines 4 variants (normal, bold, italic, font italic) would it be 4KB for all of them ... or 4KB per file (4 * 4KB = 16KB in total).

Thanks!

[Lyrkan]

@javiereguiluz These options are the ones provided by the URL loader, not something we added on our side:

• The mimetype is optional and isn't a filter. You can use it if you want to force the mimetype in the generated data URL (data:<mimetype>;base64,<data>). By default the URL loader will look at the file extension to guess it.

• The size limit is per require call (for instance an url(...) in a CSS file).