A tiny alternative to url-loader and file-loader for webpack 5.
npm install new-url-loaderA 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. 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.
``sh`
npm install new-url-loader --save-dev
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.
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
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
See examples.