url-extend-loader

Install

npm install --save-dev url-extend-loader

Usage

The url-extend-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-extend-loader'
            options: {
              limit: 8192,
              inlineFlag: '__inline'
            }  
          }
        ]
      }
    ]
  }
}

some.css

// config.limit: 8192
// arrow.png == 10000kb
background-image: url(/image/arrow.png);
// will be resolved by file-loader
background-image: url(/image/arrow.png?__inline);
// will be forced return a DataURL

Options

Name	Type	Default	Description
inlineFlag	{String}	__inline	Force inline files
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)
prefix	{String}	false	Parameters for the file-loader are valid too. They are passed to the file-loader if used