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

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

一、基础配置

const path = require("path");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
};

二、例子

1、基本信息

• src/images/1.jpeg
• src/images/2.png
• src/images/3.gif

2、使用图片资源

• src/less/index.less

.box2 {
  width: 100px;
  height: 100px;
  background-image: url("../images/1.jpeg");
  background-size: cover;
}

• src/sass/index.sass

.box3
  width: 100px
  height: 100px
  background-image: url("../images/2.png")
  background-size: cover

• src/styl/index.styl

.box5
  width
  100px
  height
  100px
  background-image
  url("../images/3.gif")
  background-size
  cover
  background-size
  cover;
  background-size
  cover
  background-size
  cover;

3、运行指令

npx webpack

打开 index.html 页面查看效果

4、输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源

因为 Webpack 会将所有打包好的资源输出到 dist 目录下

• 为什么样式资源没有呢？

因为经过 style-loader 的处理，样式资源打包到 main.js 里面去了，所以没有额外输出出来

三、优化手段

主要的优化手段涉及到：

• 静态资源服务器、CDN： 将图片上传到静态服务器，在代码中引用资源路径 URL，可以显著减小生成文件的体积。
• 图片转码： 将小于某个大小的图片转化成 data URI 形式（Base64 格式），优点是可以减少请求数量，缺点是会增加体积。
• 设置缓存： 缓存无需单独配置，只需要在生成 bundle 时，指定输出目录、设置文件指纹（hash 值）等操作。
• 图片压缩： 主要分为无损压缩和有损压缩，可以明显减小文件体积
  • 无损压缩： imagemin-gifsicle，imagemin-svgo，imagemin-jpegtran，imagemin-optipng；
  • 有损压缩： imagemin-gifsicle，imagemin-svgo，imagemin-mozjpeg，imagemin-pngquant；

代码：

const path = require("path");
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        // 转码为 dataURI 形式
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024 // 小于10kb的图片会被base64处理
          }
        },
        // 缓存相关
        generator: {
          // 将图片文件输出到 static/imgs 目录中
          // 将图片文件命名 [hash:8][ext][query]
          // [hash:8]: hash值取8位
          // [ext]: 使用之前的文件扩展名
          // [query]: 添加之前的query参数
          filename: "static/imgs/[hash:8][ext][query]",
        },
      },
    ],
  },
  plugins: [
    optimization: {
      minimizer: [
        // 压缩图片
        new ImageMinimizerPlugin({
          minimizer: {
            implementation: ImageMinimizerPlugin.imageminGenerate,
            options: {
              plugins: [
                ["gifsicle", { interlaced: true }],
                ["jpegtran", { progressive: true }],
                ["optipng", { optimizationLevel: 5 }],
                [
                  "svgo",
                  {
                    plugins: [
                      "preset-default",
                      "prefixIds",
                      {
                        name: "sortAttrs",
                        params: {
                          xmlnsOrder: "alphabetical",
                        },
                      },
                    ],
                  },
                ],
              ],
            },
          },
        }),
      ],
    },
  ]
};

更新日志

2025/8/24 08:17

查看所有更新日志

• e7112-1于 2025/8/24