A loader for webpack which transforms files into base64 URIs.

To begin, you'll need to install url-loader:

$ 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

import img from './image.png';

webpack.config.js

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, ], }, };

And run webpack via your preferred method.

Type: 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

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { fallback: '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

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { fallback: 'responsive-loader', quality: 85, }, }, ], }, ], }, };

Type: Number|Boolean Default: undefined

The limit can be specified via loader options and defaults to no limit.

A Number 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

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: 8192, }, }, ], }, ], }, };

Enable or disable transform files into base64.

webpack.config.js

module.exports = { module: { rules: [ { test: /\.(png|jpg|gif)$/i, use: [ { loader: 'url-loader', options: { limit: false, }, }, ], }, ], }, };

Type: 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

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.

CONTRIBUTING

MIT