A loader for webpack which transforms files into base64 URIs.
To begin, you'll need to install url-loader:
console
$ npm install url-loader --save-dev
url-loader works like
file-loader, but can return
a DataURL if the file is smaller than a byte limit.
index.js
js
import img from './image.png';
webpack.config.js
js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
And run webpack via your preferred method.
fallbackType: String
Default: 'file-loader'
Specifies an alternative loader to use when a target file's size exceeds the
limit set in the limit option.
webpack.config.js
js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
fallback: require.resolve('responsive-loader'),
},
},
],
},
],
},
};
The fallback loader will receive the same configuration options as url-loader.
For example, to set the quality option of a responsive-loader above use:
webpack.config.js
js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
fallback: require.resolve('responsive-loader'),
quality: 85,
},
},
],
},
],
},
};
limitType: Number|Boolean|String
Default: undefined
The limit can be specified via loader options and defaults to no limit.
Number|StringA Number or String specifying the maximum size of a file in bytes. If the file size is
equal or greater than the limit file-loader
will be used (by default) and all query parameters are passed to it.
Using an alternative to file-loader is enabled via the fallback option.
webpack.config.js
js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: 8192,
},
},
],
},
],
},
};
BooleanEnable or disable transform files into base64.
webpack.config.js
js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
limit: false,
},
},
],
},
],
},
};
mimetypeType: String
Default: (file extension)
Sets the MIME type for the file to be transformed. If unspecified the file extensions will be used to lookup the MIME type.
webpack.config.js
js
module.exports = {
module: {
rules: [
{
test: /\.(png|jpg|gif)$/i,
use: [
{
loader: 'url-loader',
options: {
mimetype: 'image/png',
},
},
],
},
],
},
};
Please take a moment to read our contributing guidelines if you haven't yet done so.