处理图片资源

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

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

webpack可以什么都不配置

webpack5默认会处理图片资源，webpack4需要单独配置

（这里的话，把后面看了，再来理解）

但是

• 不配置时，webpack 的压缩小体积图片为 Base64 URL 不会触发，

• 配置时 小体积图片被压缩成 Base64 URL 的图片，不过该图片资源就不会在 dist输出

注意配置压缩图片时

优势：减少网络请求

劣势：（Base64 URL）增加了输出文件代码体积

webpack配置

// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/main.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
        // 处理图片资源
      {
        // 匹配图片资源后缀名 
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

type 配置概念

// 处理图片资源
{
    // 匹配图片资源后缀名 
    test: /\.(png|jpe?g|gif|webp)$/,
    type: "asset",
},

• type：这个属性指定了模块的类型。在这里，它被设置为 "asset"，表示这是一个资源文件。Webpack 5 引入了几种新的模块类型，包括 "asset"、"asset/resource" 和 "asset/image" 等。使用 "asset" 类型，Webpack 会根据文件类型生成一个合理的处理方式。

  • "asset"：适用于大多数资产文件，Webpack 会根据文件类型选择合适的加载器进行处理。相当于url-loader, 将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式

  • "asset/resource"：将资产文件作为原始源代码返回，不进行转换。

    • "asset/image"：适用于图像文件，可以返回一个数据URL或者一个单独的图像文件。相当于file-loader, 将文件转化成 Webpack 能识别的资源，其他不做处理

压缩小体积图片为Base64 URL

{
    test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
            parser: {
                dataUrlCondition: {
                    maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
                },
            },
},

​