webpack5打包之 图片、字体、icon

1:webpack5打包之 图片

01:webpack5打包之 图片转化base64等

webpack.config.js

    // loader相关配置
    module: {
      rules: [
        {
          test: /\.(png|jpg|svg|gif|webp|JPG|jpe)$/, 
          type: 'asset',
          parser: {
            dataUrlCondition: {
              maxSize: 20 * 1024 // 把小于 20kb 的文件转成 Base64 的格式
            }
          }, 
          generator: {
            // [ext]前面自带"."
            filename: 'assets/[hash:8].[name][ext]',
          },
        },

      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

main.css

body {
  /* background: yellow; */
  /* 29kb  效果 background: url(images/dog1-afa6a.min.webp); */
  background: url("../assets/dog.webp");
  /* 4.4kb 效果 background: url(data:image/webp;base64,UklGRpYRA。。。。 */
  /* background: url("../assets/hlw.webp") */
    /* 注意点：配置了图片的大小压缩 小于20kb 转化为base64 */
}
1
2
3
4
5
6
7
8

图片目录

npm run build 打包后的效果

• base64 （ 小于 20kb的图片）
  
• 大于20kb的图片

02:webpack5打包之 图片压缩等

package.json

  "devDependencies": {
    "image-webpack-loader": "^8.1.0",
  },
1
2
3

webpack.config.js

    // loader相关配置
    module: {
      rules: [
        {
          test: /\.(png|jpg|svg|gif|webp|JPG|jpe)$/,
          type: 'asset/resource',
          parser: {
            dataUrlCondition: {
              maxSize: 20 * 1024 // 把小于 20kb 的文件转成 Base64 的格式
            }
          },
          generator: {
            // [ext]前面自带"."
            filename: 'assets/[hash:8].[name][ext]',
          },
          use: [
            // 使用 image-webpack-loader 对图片进行压缩
            {
              loader: "image-webpack-loader",
              options: {
                mozjpeg: {
                  progressive: true,
                  quality: 65
                },
                optipng: {
                  enabled: false
                },
                pngquant: {
                  quality: '65-90',
                  speed: 4
                },
                gifsicle: {
                  interlaced: false
                },
                // 不起效果???
                webp: {
                  quality: 75
                }
              }
            },
          ]
        },

      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

main.css

body {
  /* background: yellow; */
  /* 29kb  效果 background: url(images/dog1-afa6a.min.webp); */
  /* background: url("@/assets/dog.webp"); */
  /* 4.4kb 效果 background: url(data:image/webp;base64,UklGRpYRA。。。。 */
  /* background: url("../assets/hlw.webp") */
    /* 注意点：配置了图片的大小压缩 小于20kb 转化为base64 */
    background: url("../assets/11.jpg") 
}
1
2
3
4
5
6
7
8
9

npm run build效果

• dist / index.html 效果
  

• 打包前
  

• 打包后
  

2:webpack5打包之 字体

webpack.config.js

    // loader相关配置
    module: {
      rules: [
        // 添加字体文件的处理规则
        {
          test: /.ttf|eot|woff2?$/i,
          type: 'asset/resource',
          generator: {
            filename: 'font/[name].[hash:6][ext]'
          }
        },

      ]
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14

目录

css / main.css

@font-face {
  font-family: "PingFang";
  src: url("../fonts/PingFang\ Bold.ttf");
}
body {
  /* background: yellow; */
  /* 29kb  效果 background: url(images/dog1-afa6a.min.webp); */
  /* background: url("@/assets/dog.webp"); */
  /* 4.4kb 效果 background: url(data:image/webp;base64,UklGRpYRA。。。。 */
  /* background: url("../assets/hlw.webp") */
    /* 注意点：配置了图片的大小压缩 小于20kb 转化为base64 */
    background: url("../assets/11.jpg");
    font-family: 'PingFang';
    
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

npm run build效果

3:webpack5打包之 icon