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

痛定思痛。 2022-02-27 11:52 367阅读 0赞

### webpack 编译图片配置 ###

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

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

### url-loader 配置说明 ###

npm install file-loader url-loader -D

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

![Q20190327-160641\](media/15536719753688/QQ20190327-160641.png)][Q20190327-160641_media_15536719753688_QQ20190327-160641.png]

**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 ###

> [论坛讨论传送门][Link 2]

`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` 中，这些图片将无法做到按需加载，而且会拖慢首次渲染的效率。

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

[Link 1]: https://www.webpackjs.com/loaders/
[Q20190327-160641_media_15536719753688_QQ20190327-160641.png]: /images/20220227/820da566b4d7424f80d8a06048f8f081.png
[Link 2]: https://stackoverflow.com/questions/49080007/url-loader-vs-file-loader-webpack