Webpack -- 05 处理字体图标资源及其他音视频资源

1 . 字体图标

不需要借助什么loader，只需添加一个配置即可。

{
  test: /\.(ttf|woff2?)$/,
  type: "asset/resource",  //注：此形式不会转 base 64，而 "asset" 会转 base64
  generator: {
    filename: {
       "static/media/[hash:10][ext][query]",
    }
  },
}

补：

使用阿里字体图标的方法：

• 去阿里下载完成后，将 .css 文件引入项目的 css 文件夹下，再将所需的字体图标的文件引入项目的iconFont文件夹里
• 然后在引入的 .css 文件里修改正确的字体图标的路径
• 使用，推荐用 font-class 方式进行使用

2 . 处理音视频资源

直接在处理字体图标资源的配置后面加上音视频的后缀就行

{
  test: /\.(ttf|woff2?|map3|map4|avi)$/,
  type: "asset/resource",  //注：此形式不会转 base 64，而 "asset" 会转 base64
  generator: {
    filename: {
       "static/media/[hash:10][ext][query]",
    }
  },
}