处理图片资源

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

现在 Webpack5 已经将两个 Loader 功能内置到 Webpack 了，我们只需要简单配置即可。

1.配置

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: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
      {
        test: /\.s[ac]ss$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.styl$/,
        use: ["style-loader", "css-loader", "stylus-loader"],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
      },
    ],
  },
  plugins: [],
  mode: "development",
};

2.添加图片资源

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

使用图片资源

• src/css/index.css

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

• src/less/index.less

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

• src/sass/index.sass

.box3
    width:100px
    height:100px
    background-image: url(../images/3.gif)
    background-size: cover

4.运行命令

npx webpack

打开 index.html 页面查看效果

5.输出资源情况

此时如果查看 dist 目录的话，会发现多了三张图片资源。 因为 Webpack 会将所有打包好的资源输出到 dist 目录下，

• 为什么样式资源没有呢

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

6.对图片资源进行优化

将小于某个大小的图片转换为 data URL 形式(Base64 格式)

const path = require("path");

module.exports = {
  //入口
  entry: "./src/main.js", //相对路径
  //输出
  output: {
    //文件的输出路径
    //__dirname nodejs的变量，代表当前文件的文件夹目录
    path: path.resolve(__dirname, "dist"), //相对路径
    //文件名
    filename: "main.js",
  },
  //加载器
  module: {
    rules: [
      {
        // 用来匹配 .css 结尾的文件
        test: /\.css$/,
        // use 数组里面 Loader 执行顺序是从右到左
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.less$/,
        //loader 只能使用一个 loader
        use: [
          // compiles Less to CSS
          "style-loader",
          "css-loader",
          "less-loader",
        ],
      },
      {
        test: /\.s[ac]ss$/i,
        use: [
          // 将 JS 字符串生成为 style 节点
          "style-loader",
          // 将 CSS 转化成 CommonJS 模块
          "css-loader",
          // 将 Sass 编译成 CSS
          "sass-loader",
        ],
      },
      {
        test: /\.styl$/,
        use: [
          "style-loader",
          "css-loader",
          "stylus-loader", // 将stylus编译成css文件
        ],
      },
      {
        test: /\.(png|jpe?g|gif|webp)$/,
        type: "asset",
        parser: {
          dataUrlCondition: {
            maxSize: 10 * 1024, // 小于10kb的图片会被base64处理
          },
        },
      },
    ],
  },

  //插件
  plugins: [
    //plugin的配置
  ],
  //模式
  mode: "development",
};

• 优点：减少请求数量
• 缺点：体积变得更大

此时输出的图片文件就只有两张，有一张图片以 data URL 形式内置到 js 中（注意：需要将上次打包生成的文件清空，再重新打包才有效果）。