【webpack5】处理字体图标资源及其他资源

小孙小孙睡不醒

已于 2022-08-31 12:43:44 修改

阅读量179

点赞数

文章标签：前端 css html5

于 2022-08-31 12:40:06 首次发布

本文链接：https://blog.csdn.net/sylbiubiubiu/article/details/126621359

版权

处理字体图标资源

打开阿里巴巴矢量图标库
将需要的图标添加到项目，下载到本地。
在这里插入图片描述
解压后打开demo_index.html文件

将iconfont.css复制到css中。

这里使用了字体文件

将字体文件复制到fonts中

修改路径

引入后打包

修改配置

  {
      test: /\.(ttf|woff2?)$/,
      type: 'asset/resource',
      generator: {
          //输出名字
          filename: 'static/media/[hash:10][ext][query]'
      }
  }

注意修改路径
在这里插入图片描述

打包后字体样式则会显示出来
在这里插入图片描述
后续调整图标样式则可以灵活放置。

处理其他资源

        {
            test: /\.(ttf|woff2?|mp3|mp4|avi)$/,
            type: 'asset/resource',
            generator: {
                //输出名字
                filename: 'static/media/[hash:10][ext][query]'
            }
        },

修改配置即可