JSPM

  • Created
  • Published
  • Downloads 6
  • Score
    100M100P100Q60590F
  • License Apache

A loader for webpack which transforms files into base64 URIs

Package Exports

  • chameleon-url-loader

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (chameleon-url-loader) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

增加了url参数中存在__inline时,返回base64

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

url-loader

A loader for webpack which transforms files into base64 URIs.

Requirements

This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.

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.

import img from './image.png'
// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        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
{
  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:

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

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.

// webpack.config.js
{
  loader: 'url-loader',
  options: {
    limit: 8192
  }
}

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
{
  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

[tests]: https://img.shields.io/circleci/project/github/webpack-contrib/url-loader.svg [tests-url]: https://circleci.com/gh/webpack-contrib/url-loader