Sponsor webpack and get apparel from the official shop or get stickers here! All proceeds go to our open collective!

ag-grid is proud to partner with webpack

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
Name
Type
{Number}
Default
undefined
Description
Byte limit to inline files as Data URL
Name
Type
{String}
Default
extname
Description
Specify MIME type for the file (Otherwise it's inferred from the file extension)
Name
Type
{String}
Default
file-loader
Description
Specify loader for the file when file is greater than the limit (in bytes)

##

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

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

Example: To set the quality option of the responsive-loader above use:

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

Maintainers


      Juho Vepsäläinen


      Joshua Wiens


      Artem Sapegin


      Michael Ciniawsky


      Alexander Krasnoyarov