webpack 编译图片配置及 url-loader、file-loader 区别

webpack 编译图片配置

通过翻阅官方手册，我们发现可以借助 url-loader 或是 file-loader完成对 webpack 编译图片的配置。

下面我先分别介绍两种 loader 的配置方法(大家按需求选择其一)，然后再简单介绍下两者的区别。

url-loader 配置说明

npm install file-loader url-loader -D

url-loader 依赖于 file-loader，如果不安装 file-loader，会报下面的错误

webpack.config.js

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

file-loader 配置说明

npm install file-loader -D

webpack.config.js

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

url-loader vs file-loader

论坛讨论传送门

url-loader 功能是基于 file-loader之上， 在 options 配置添加了一个 limit 属性，例如上面设置的 limit: 500

表示当图片大小 <= 500bit 时，图片会自动转为 base64 格式

data:;base64,aW1wb3J0IFJlYWN0IGZ...

就像上面，然后以字符串形式一起打包进 bundle.js 中，从而减少图片请求的数量提升性能，而大于500bit的图片 url-loader 就不再做处理，由 file-loader从服务器作为静态资源调用

那是不是 url-loader 就优于 file-loader 呢？

那也不是这更多的是一个平衡的问题，要对应用场景有所考虑

1. 首先，url-loader 的 limit 配置项最好不要设的太大，比如 limit 等于200kb，那每张小于200kb的图片都将 bundle.js 中，那无疑会大大增加 bundle.js 的体积
2. 如果你的项目中有许多小于1kb的小图片，在设置了 url-loader 之后，它们都会被一次打包进 bundle.js 中，这些图片将无法做到按需加载，而且会拖慢首次渲染的效率。

可以说两者的选择，也是一种平衡大小和请求数量的选择，两者各有不同的作用。