在打包过程中，如果遇到体积较小的图片，我们可能并不想单独的在打包文件中生成一个图片文件，这时我们可以将图片打包成一个 base64 格式的编码，直接放在 js 中。
这时我们就需要用到 url-loader，url-loader 是依赖 file-loader 的loader。

安装 loader

  1. yarn add url-loader --dev

配置 webpack

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

  }
  //...
}

如上述代码所示，引入 url-loader，参数如下：

  • limit 限制大小，类型 number，单位是 byte。当图片大小小于 10240 btye 也就是 10 KB 时，会将它打包成base64 格式。

    实际使用

    准备两张图片。一张 test.jpeg （138 KB），一张 test2.png（8KB）。如下：
    image.png
    引用如下： ```javascript / ./src/test.jpeg / import url from ‘./test.jpeg’; import url2 from ‘./test2.png’;

let img = new Image(); img.src = url; document.body.appendChild(img);

let img2 = new Image(); img2.src = url2; document.body.appendChild(img2); ``` 写完上面的代码就可以进行打包了。

打包产物

结果不符合大小的图片被直接在 dist 中生成，如下：
image.png
符合大小的图片被编译成了 base64，如下：
image.png

页面结果

image.png
结果符合预期，两张图片正常显示，一个直接引用，一个 base64。