235 lines
4.7 KiB
Markdown
235 lines
4.7 KiB
Markdown
<div align="center">
|
|
<a href="https://github.com/webpack/webpack">
|
|
<img width="200" height="200" src="https://webpack.js.org/assets/icon-square-big.svg">
|
|
</a>
|
|
</div>
|
|
|
|
[![npm][npm]][npm-url]
|
|
[![node][node]][node-url]
|
|
[![deps][deps]][deps-url]
|
|
[![tests][tests]][tests-url]
|
|
[![chat][chat]][chat-url]
|
|
[![size][size]][size-url]
|
|
|
|
# url-loader
|
|
|
|
A loader for webpack which transforms files into base64 URIs.
|
|
|
|
## Getting Started
|
|
|
|
To begin, you'll need to install `url-loader`:
|
|
|
|
```console
|
|
$ npm install url-loader --save-dev
|
|
```
|
|
|
|
`url-loader` works like
|
|
[`file-loader`](https://github.com/webpack-contrib/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.
|
|
|
|
## 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**
|
|
|
|
```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,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
```
|
|
|
|
### `limit`
|
|
|
|
Type: `Number|Boolean|String`
|
|
Default: `undefined`
|
|
|
|
The limit can be specified via loader options and defaults to no limit.
|
|
|
|
#### `Number|String`
|
|
|
|
A `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`](https://github.com/webpack-contrib/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,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
```
|
|
|
|
#### `Boolean`
|
|
|
|
Enable 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,
|
|
},
|
|
},
|
|
],
|
|
},
|
|
],
|
|
},
|
|
};
|
|
```
|
|
|
|
### `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**
|
|
|
|
```js
|
|
module.exports = {
|
|
module: {
|
|
rules: [
|
|
{
|
|
test: /\.(png|jpg|gif)$/i,
|
|
use: [
|
|
{
|
|
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](./.github/CONTRIBUTING.md)
|
|
|
|
## License
|
|
|
|
[MIT](./LICENSE)
|
|
|
|
[npm]: https://img.shields.io/npm/v/url-loader.svg
|
|
[npm-url]: https://npmjs.com/package/url-loader
|
|
[node]: https://img.shields.io/node/v/url-loader.svg
|
|
[node-url]: https://nodejs.org
|
|
[deps]: https://david-dm.org/webpack-contrib/url-loader.svg
|
|
[deps-url]: https://david-dm.org/webpack-contrib/url-loader
|
|
[tests]: https://dev.azure.com/webpack-contrib/url-loader/_apis/build/status/webpack-contrib.url-loader?branchName=master
|
|
[tests-url]: https://dev.azure.com/webpack-contrib/url-loader/_build/latest?definitionId=2&branchName=master
|
|
[cover]: https://codecov.io/gh/webpack-contrib/url-loader/branch/master/graph/badge.svg
|
|
[cover-url]: https://codecov.io/gh/webpack-contrib/url-loader
|
|
[chat]: https://img.shields.io/badge/gitter-webpack%2Fwebpack-brightgreen.svg
|
|
[chat-url]: https://gitter.im/webpack/webpack
|
|
[size]: https://packagephobia.now.sh/badge?p=url-loader
|
|
[size-url]: https://packagephobia.now.sh/result?p=url-loader
|