https://github.com/marella/new-url-loader
A tiny alternative to url-loader and file-loader for webpack 5.
https://github.com/marella/new-url-loader
file-loader url-loader webpack webpack-loader
Last synced: about 1 year ago
JSON representation
A tiny alternative to url-loader and file-loader for webpack 5.
- Host: GitHub
- URL: https://github.com/marella/new-url-loader
- Owner: marella
- License: mit
- Created: 2021-06-17T10:39:42.000Z (almost 5 years ago)
- Default Branch: main
- Last Pushed: 2022-03-13T16:07:29.000Z (over 4 years ago)
- Last Synced: 2024-11-02T10:11:32.119Z (over 1 year ago)
- Topics: file-loader, url-loader, webpack, webpack-loader
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 8
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# [new-url-loader](https://github.com/marella/new-url-loader) [](https://github.com/marella/new-url-loader/actions/workflows/tests.yml) [](https://coveralls.io/github/marella/new-url-loader) [](https://packagephobia.com/result?p=new-url-loader)
A tiny alternative to `url-loader` and `file-loader` for webpack 5.
The `url-loader` and `file-loader` are deprecated in webpack 5 and replaced by [asset modules](https://webpack.js.org/guides/asset-modules/). Loaders that are used with `url-loader` or `file-loader` (example: `@svgr/webpack` in Create React App) might still need them. `new-url-loader` provides the functionality of both `url-loader` and `file-loader` using asset modules and [URL assets](https://webpack.js.org/guides/asset-modules/#url-assets).
## Installation
```sh
npm install new-url-loader --save-dev
```
## Usage
If you are using `url-loader` or `file-loader` with another loader (example: `@svgr/webpack`), you can replace them with `new-url-loader`. The following examples show how to configure webpack to load SVGs using `@svgr/webpack`.
### Replacing `url-loader`
**Old**
```js
{
test: /\.svg$/,
use: ['@svgr/webpack', 'url-loader'],
}
```
**New**
```js
{
test: /\.svg$/,
oneOf: [
{
dependency: { not: ['url'] }, // exclude new URL calls
use: ['@svgr/webpack', 'new-url-loader'],
},
{
type: 'asset', // export a data URI or emit a separate file
},
],
}
```
By default, a file with size less than 8kb will be inlined as a data URI and emitted as a separate file otherwise. To change the file size limit, use:
```js
{
type: 'asset',
parser: {
dataUrlCondition: {
maxSize: 4 * 1024, // 4kb
},
},
}
```
You can also specify a function to decide whether to inline a file or not. [Learn more](https://webpack.js.org/configuration/module/#ruleparserdataurlcondition)
### Replacing `file-loader`
**Old**
```js
{
test: /\.svg$/,
use: ['@svgr/webpack', 'file-loader'],
}
```
**New**
```js
{
test: /\.svg$/,
oneOf: [
{
dependency: { not: ['url'] }, // exclude new URL calls
use: ['@svgr/webpack', 'new-url-loader'],
},
{
type: 'asset/resource', // emit a separate file
},
],
}
```
By default, files are emitted with `[hash][ext][query]` name to output directory. To customize the output filename, use:
```js
{
type: 'asset/resource',
generator: {
filename: 'static/media/[name].[hash][ext]',
},
}
```
It also works with `asset` module type. [Learn more](https://webpack.js.org/guides/asset-modules/#custom-output-filename)
### Server Side Rendering
For Server Side Rendering (SSR) when base URL is not known by server, set [`module.parser.javascript.url`](https://webpack.js.org/configuration/module/#moduleparserjavascripturl) to `'relative'` to avoid generating URLs like `file:///path/to/project/dist/file.svg`. See #1.
## Examples
See [examples](https://github.com/marella/new-url-loader/tree/main/examples/svgr).