new-url-loader

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. 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.

Installation

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

{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'url-loader'],
}

New

{
  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:

{
  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

Replacing file-loader

Old

{
  test: /\.svg$/,
  use: ['@svgr/webpack', 'file-loader'],
}

New

{
  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:

{
  type: 'asset/resource',
  generator: {
    filename: 'static/media/[name].[hash][ext]',
  },
}

It also works with asset module type. Learn more

Examples

See examples.