url-loader

What is url-loader?

The url-loader npm package is used within web development environments to encode files as Base64 URLs and include them inline in the code. It is often used with webpack to handle images, fonts, and other file types within JavaScript and CSS files. When the file size is below a specified limit, url-loader will transform the file into a Data URL; otherwise, it falls back to file-loader, which handles larger files by emitting them to a separate file and returns the file URL.

What are url-loader's main functionalities?

Encode files as Data URLs

This webpack configuration uses url-loader to process image files. If an image is smaller than 8KB, it will be converted to a Base64 encoded Data URL and inlined in the code. Larger images will be handled by file-loader, which is the default fallback.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
};

Fallback to file-loader

In this example, url-loader is configured with a fallback option. If the file size exceeds the limit, file-loader is used to emit the file to the output directory and returns the public URL. The 'name' option specifies the naming convention for the emitted files.

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              fallback: 'file-loader',
              name: '[path][name].[ext]'
            }
          }
        ]
      }
    ]
  }
};

Other packages similar to url-loader

file-loader

file-loader resolves import/require() on a file into a url and emits the file into the output directory. It is similar to url-loader but does not convert files to Data URLs. It is often used as a fallback for url-loader when files exceed the specified limit.

raw-loader

raw-loader loads files as a string and is similar to url-loader in the sense that it allows the inclusion of file contents inline in the code. However, it does not encode the files to Base64, nor does it have a fallback mechanism like url-loader.

svg-url-loader

svg-url-loader is designed specifically for SVG files. It encodes SVGs into compact Data URLs, similar to what url-loader does for general files. It has optimizations for SVGs, such as removing unnecessary whitespace, newlines, and comments, which url-loader does not perform by default.

README

URL Loader

Loads files as `base64` encoded URL

Install

npm install --save-dev url-loader

Usage

The url-loader works like the file-loader, but can return a DataURL if the file is smaller than a byte limit.

import img from './image.png'

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

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

{
  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

{
  loader: 'url-loader',
  options: {
    mimetype: 'image/png'
  }
}

fallback

webpack.config.js

{
  loader: 'url-loader',
  options: {
    fallback: 'responsive-loader'
  }
}

Maintainers

Juho Vepsäläinen

Joshua Wiens

Artem Sapegin

Michael Ciniawsky

Alexander Krasnoyarov

Changelog

1.0.1 (2018-03-03)

Bug Fixes

• index: revert to CJS exports (module.exports) (#116) (7b60cc2)

<a name="1.0.0"></a>