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

Server Side Rendering

For Server Side Rendering (SSR) when base URL is not known by server, set module.parser.javascript.url to 'relative' to avoid generating URLs like file:///path/to/project/dist/file.svg. See #1.

Examples

See examples.