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

选项

Name	类型	默认	描述
limit	{Number}	未定义	字节限制为将文件内联为数据网址
mimetype	{String}	extname	指定文件的MIME类型（否则从文件扩展名推断）
fallback	{String}	文件加载器	文件大于限制时指定文件的加载程序（以字节为单位）

如果文件大于限制（以字节为单位），file-loader则默认使用该文件，并将所有查询参数传递给它。您可以使用其他装载程序使用fallback选项。

限制可以通过加载程序选项指定，默认为无限制。

webpack.config.js

{
  loader: 'url-loader',
  options: {
    limit: 8192
  }
}

mimetype

设置文件的MIME类型。如果未指定，则将使用文件扩展名来查找MIME类型。

webpack.config.js

{
  loader: 'url-loader',
  options: {
    mimetype: 'image/png'
  }
}

fallback

webpack.config.js

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