url-loader

[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![chat][chat]][chat-url] [![size][size]][size-url]

A loader for webpack which transforms files into base64 URIs.

Getting Started

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

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

  1. import img from './image.png'
  1. // webpack.config.js
  2. module.exports = {
  3.   module: {
  4.     rules: [
  5.       {
  6.         test: /\.(png|jpg|gif)$/i,
  7.         use: [
  8.           {
  9.             loader: 'url-loader',
  10.             options: {
  11.               limit: 8192
  12.             }
  13.           }
  14.         ]
  15.       }
  16.     ]
  17.   }
  18. }

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.

  1. // webpack.config.js
  2. {
  3.   loader: 'url-loader',
  4.   options: {
  5.     fallback: 'responsive-loader'
  6.   }
  7. }

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:

  1. {
  2.   loader: 'url-loader',
  3.   options: {
  4.     fallback: 'responsive-loader',
  5.     quality: 85
  6.   }
  7. }

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.

  1. // webpack.config.js
  2. {
  3.   loader: 'url-loader',
  4.   options: {
  5.     limit: 8192
  6.   }
  7. }

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.

  1. // webpack.config.js
  2. {
  3.   loader: 'url-loader',
  4.   options: {
  5.     mimetype: 'image/png'
  6.   }
  7. }

Contributing

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

CONTRIBUTING

License

MIT