526互联

webpack--图片资源的处理

发布时间 2023-09-10 15:58:40作者: 隔岸苦晴

引言

当我们在网页应用中使用图片资源时，会发现打包后的资源就直接存在于目录之下。若我们想要对图片进行处理的话，就要进行相应的操作。

处理图片资源

我们在webpack.config.js中的loader处添加图片资源的处理的loader，但是这个loader在webpack中时内置的，无需下载，例子如下：

{
      test: /\.(png|jpe?g|git|webp|svg)/,
      type: 'asset',
      parser: {
        dataUrlCondition: {
          // 小于10kb的图片转成base64,
          // 有点：减少请求数量，缺点，体积会有所增大
          maxSize: 10 * 1024
        }
      }
}

在上面这些案例中，我们对png、jpe?g、git、webp、svg等资源进行了处理，小于10kb的会在样式文件中直接保存为base4的格式。

输出目录

我们可以在这个loader中配置相关的设置来执行编译之后图片存放的位置，其中filename为存放位置的相对路径，hash为文件的hash值，ext为文件扩展名，query可不写：

generator: {
   // 输出图片名称
   filename: 'static/images/[hash:10][ext][query]'
}