处理图片资源

过去在 Webpack4 时，我们处理图片资源通过 file-loader 和 url-loader 进行处理

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 里了，我们只需要简单配置即可处理图片资源

1. 配置

js

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|webp|svg)$/i,
      type: 'asset/resource' // 将图片资源输出为文件
    }
  ]
}

2. 对图片资源进行优化

优化逻辑

浏览器可以原生识别base64格式图片
图片转为base64后，网络请求数量可以变少

缺点是转base64之后，图片越大，base64占用空间会更高，不是固定比例
折中的方案就是小图片转为base64，大图片路径访问加载
- 比如icon，很小的图片，一般都在10kb内
- 所以可以在loader中配置10kb以内的图片转base64

js

module: {
  rules: [
    {
      test: /\.(png|jpe?g|gif|webp|svg)$/i,
      type: 'asset', // 转base64, 默认是8kb以下自动转base64
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024, // 手动设置为10kb以下转base64
        },
      }
    }
  ]
}

3. 修改输出资源的名称和路径

默认打包后会将图片资源也放在dist的根目录
现在来修改打包后存放的位置

js

module: {
    rules: [
    {
      test: /\.(png|jpe?g|gif|webp|svg)$/i,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          maxSize: 10 * 1024,
        },
      },
      generator: {
        filename: 'static/images/[hash:10][ext][query]',
      },
    }
  ]
}

filename代表文件目录及文件名
[hash:10] 取这个文件的hash值前10位
[ext] 原目录文件的后缀名
[query] 本来访问图片时文件名后面加的参数，可能会有也加上