!npmnpmnpm-url !nodenodenode-url !depsdepsdeps-url !teststeststests-url !chatchatchat-url !sizesizesize-url
url-loader
A loader for webpack which transforms files into base64 URIs.Requirements
This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.Getting Started
To begin, you'll need to installurl-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.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.Options
fallback
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
{
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:
{
loader: 'url-loader',
options: {
fallback: 'responsive-loader',
quality: 85
}
}
limit
Type: Number
Default: undefined
A
Number
specifying the maximum size of a file in bytes. If the file is
greater than the limit,
file-loader
is used by
default and all query parameters are passed to it. Using an alternative to
file-loader
is enabled via the fallback
option.The limit can be specified via loader options and defaults to no limit.
// webpack.config.js
{
loader: 'url-loader',
options: {
limit: 8192
}
}
mimetype
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
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
Contributing
Please take a moment to read our contributing guidelines if you haven't yet done so.CONTRIBUTING