url-loader

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

Alexander Krasnoyarov

url-loader

URL Loader

Install

Usage

Options

`limit`

`mimetype`

`fallback`

Maintainers

Collaborators list

Stats

Try it out

Keywords

Dependencies (3)

Dependents (2268)