url-loader

url-loader

A loader for webpack which transforms files into base64 URIs.

Requirements

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

Getting Started

To begin, you'll need to install url-loader:

$ npm install url-loader --save-dev

url-loader works like 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)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
}

And run webpack via your preferred method.

Options

fallback

Type: String Default: 'file-loader'

Specifies an alternative loader to use when a target file's size exceeds the limit set in the limit option.

// webpack.config.js
{
  loader: 'url-loader',
  options: {
    fallback: 'responsive-loader'
  }
}

The fallback loader will receive the same configuration options as url-loader.

For example, to set the quality option of a responsive-loader above use:

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

limit

Type: Number Default: undefined

A Number specifying the maximum size of a file in bytes. If the file is greater than the limit, file-loader is used by default and all query parameters are passed to it. Using an alternative to file-loader is enabled via the 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

Type: String Default: (file extension)

Sets the MIME type for the file to be transformed. If unspecified the file extensions will be used to lookup the MIME type.

// webpack.config.js
{
  loader: 'url-loader',
  options: {
    mimetype: 'image/png'
  }
}

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT

Changelog

1.1.2 (2018-10-10)

Bug Fixes

• fallback options behaviour (#145) (03e631f)
• package: add support for webpack =< v3.0.0 (peerDependencies) (#150) (a6860fc)
• package: relax node version range (engines) (#155) (d37b108)
• utils/normalizeFallback: correctly pass all options to the default fallback (file-loader) (#139) (401be63)

<a name="1.1.1"></a>

Similar packages

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.