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

选项

如果文件大于限制（以字节为单位），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'
  }
}