领略 file-loader 与 url-loader 之间，Webpack 世界的图片打包利器

2024-01-04 19:06:22







file-loader 与 url-loader，webpack 中的两颗璀璨明星，它们在图片和字体资源的加载方面各有千秋，为开发者提供了多元化的选择。本文将对它们的区别进行详细的阐述，以便您在实际开发中能游刃有余地使用它们。

**file-loader：** 

- file-loader的作用是将文件（图片、字体等）拷贝到指定目录，并将该文件的路径作为模块的导出值。
- 优势在于能保持文件原样，不会对其进行任何修改或压缩，因此对于一些对文件完整性有严格要求的场景非常适用。
- 缺点是可能会导致打包后的体积较大，且无法在加载过程中进行优化。

**url-loader：** 

- url-loader的作用与file-loader相似，也是将文件拷贝到指定目录，但它还提供了对文件的内联处理功能。
- url-loader会将文件转换成base64格式的数据URI，并将其直接嵌入到JavaScript文件中，因此可以减少HTTP请求的数量，提高加载速度。
- 当文件较小时，url-loader的这种内联处理方式非常有效，但当文件较大时，就会导致JavaScript文件的大小急剧增大，反而会影响加载速度。

**使用场景：** 

- 当文件较小（一般小于10KB）且对完整性要求不高时，可以使用url-loader。
- 当文件较大或对完整性有严格要求时，可以使用file-loader。
- 当需要对文件进行压缩或其他处理时，可以使用file-loader，然后通过适当的插件来对文件进行处理。

**webpack 配置：** 

```javascript
module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif|svg)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 10240, //小于10kb的图片转base64，大于10kb的图片复制到dist目录
            },
          },
        ],
      },
      {
        test: /\.(ttf|eot|woff|woff2)$/,
        use: [
          {
            loader: 'file-loader',
          },
        ],
      },
    ],
  },
};