url-loader
A loader for webpack which transforms files into base64 URIs
Last updated 21 days ago by evilebottnawi .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install url-loader 
SYNC missed versions from official npm registry.

npm node deps tests chat size

url-loader

A loader for webpack which transforms files into base64 URIs.

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.

index.js

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            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:

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              fallback: 'responsive-loader',
              quality: 85,
            },
          },
        ],
      },
    ],
  },
};

limit

Type: Number|Boolean|String Default: undefined

The limit can be specified via loader options and defaults to no limit.

Number

A Number specifying the maximum size of a file in bytes. If the file size is equal or greater than the limit file-loader will be used (by default) and all query parameters are passed to it. Using an alternative to file-loader is enabled via the fallback option.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
            },
          },
        ],
      },
    ],
  },
};

Boolean

Enable or disable transform files into base64.

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: false,
            },
          },
        ],
      },
    ],
  },
};

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

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/i,
        use: [
          {
            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

Current Tags

  • 2.0.1                                ...           latest (21 days ago)
  • 1.0.0-beta.0                                ...           next (2 years ago)

25 Versions

  • 2.0.1                                ...           21 days ago
  • 2.0.0                                ...           a month ago
  • 1.1.2                                ...           9 months ago
  • 1.1.1                                ...           a year ago
  • 1.1.0                                ...           a year ago
  • 1.0.1                                ...           a year ago
  • 1.0.0                                ...           a year ago
  • 1.0.0-beta.0                                ...           2 years ago
  • 0.6.2                                ...           2 years ago
  • 0.6.1                                ...           2 years ago
  • 0.6.0                                ...           2 years ago
  • 0.5.9                                ...           2 years ago
  • 0.5.8                                ...           2 years ago
  • 0.5.7                                ...           4 years ago
  • 0.5.6                                ...           4 years ago
  • 0.5.5                                ...           5 years ago
  • 0.5.4                                ...           5 years ago
  • 0.5.3                                ...           5 years ago
  • 0.5.2                                ...           6 years ago
  • 0.5.1                                ...           6 years ago
  • 0.5.0                                ...           6 years ago
  • 0.1.3                                ...           7 years ago
  • 0.1.2                                ...           7 years ago
  • 0.1.1                                ...           7 years ago
  • 0.1.0                                ...           7 years ago
Downloads
Today 3,257
This Week 21,751
This Month 228,244
Last Day 18,494
Last Week 106,482
Last Month 381,969
Dependencies (3)
Dependents (7227)