1. URL Loader

加载文件为base64编码的URL

1.1. 安装

npm install --save-dev url-loader

1.2. 用法

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

1.3. Options

1.3.1. limit

如果文件超过限制，默认情况下file-loader将被使用，并且所有的查询参数都会被传递给它。 也可以通过fallback选项使用其他的loader。

这个显示可以通过loader选项来指定，默认情况下无限制。

webpack.config.js

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

1.3.2. mimetype

为文件设置 MIME。如果未指定，文件扩展名将被用于查找MIME类型。

webpack.config.js

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

1.3.3. fallback

webpack.config.js

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

1.4. 维护者

Juho Vepsäläinen

Joshua Wiens

Artem Sapegin

Michael Ciniawsky

Alexander Krasnoyarov