https://github.com/react-doc/url-replace-loader
Loads files as `base64` encoded URL, url-loader enhanced.
https://github.com/react-doc/url-replace-loader
rdoc webpack webpack-loader webpack3
Last synced: 12 months ago
JSON representation
Loads files as `base64` encoded URL, url-loader enhanced.
- Host: GitHub
- URL: https://github.com/react-doc/url-replace-loader
- Owner: react-doc
- Created: 2018-01-16T17:03:18.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-16T17:24:31.000Z (about 8 years ago)
- Last Synced: 2025-02-12T07:56:32.802Z (about 1 year ago)
- Topics: rdoc, webpack, webpack-loader, webpack3
- Language: JavaScript
- Homepage:
- Size: 3.91 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Install
```bash
npm install --save-dev url-replace-loader
```
Usage
The `url-loader` works like the [`file-loader`](https://github.com/webpack-contrib/file-loader), but can return a DataURL if the file is smaller than a byte limit.
```js
import img from './image.png'
```
**webpack.config.js**
```js
module.exports = {
module: {
rules: [
{
test: /\.(svg|png|bmp|jpg|jpeg|gif)$/,
loader: require.resolve('url-loader'),
options: {
limit: 8192,
name: 'img/[name].[hash:8].[ext]',
replace: [
{
test: /rdoc\.logo\.svg$/,
path: 'path/to/logo.svg',
}
]
},
},
]
}
}
```
Options
|Name|Type|Default|Description|
|:--:|:--:|:-----:|:----------|
|**`limit`**|`{Number}`|`undefined`|Byte limit to inline files as Data URL|
|**`mimetype`**|`{String}`|`extname`|Specify MIME type for the file (Otherwise it's inferred from the file extension)|
|**`fallback`**|`{String}`|`file-loader`|Specify `loader` for the file when file is greater than the limit (in bytes)|
### `limit`
If the file is greater than the limit (in bytes) the [`file-loader`](https://github.com/webpack-contrib/file-loader) is used by default and all query parameters are passed to it.
You can use other loader using `fallback` option.
The limit can be specified via loader options and defaults to no limit.
**webpack.config.js**
```js
{
loader: 'url-loader',
options: {
limit: 8192
}
}
```
### `mimetype`
Set the MIME type for the file. If unspecified the file extensions will be used to lookup the MIME type.
**webpack.config.js**
```js
{
loader: 'url-loader',
options: {
mimetype: 'image/png'
}
}
```
### `fallback`
**webpack.config.js**
```js
{
loader: 'url-loader',
options: {
fallback: 'responsive-loader'
}
}
```
### `replace`
Replace with the specified picture.
**webpack.config.js**
```js
{
loader: 'url-loader',
options: {
replace: [
{
test: /rdoc\.logo\.svg$/,
path: 'path/to/logo.svg',
}
]
}
}
```
