【webpack5】处理图片资源

最新推荐文章于 2024-12-16 20:56:34 发布

小孙小孙睡不醒

最新推荐文章于 2024-12-16 20:56:34 发布

阅读量185

点赞数

文章标签： webpack 前端 node.js

本文链接：https://blog.youkuaiyun.com/sylbiubiubiu/article/details/126617989

版权

处理图片资源

处理图片不需要下载loader，本身webpack可以处理。
在这里插入图片描述
导入图片并引用，打包，会在dist下生成图片

在这里插入图片描述

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

优化：为了减少请求数量，对小于10kb的图片进行处理，转为base64，再进行打包。