url-loader

url-loader将文件加载为base64编码的URL

安装

npm install --save-dev url-loader

用法

url-loader 功能类似于 file-loader,但是在文件大小(单位 byte)低于指定的限制时,可以返回一个 DataURL。

import img from './image.png'

webpack.config.js

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

Options

NameTypeDefaultDescription
limit{Number}undefinedByte limit to inline files as Data URL
mimetype{String}extnameSpecify MIME type for the file (Otherwise it's inferred from the file extension)
fallback{String}file-loaderSpecify 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'
  }
}
-->