webpack字体图标资源处理和其他静态资源（6）

weixin_45750073

已于 2024-02-27 10:54:11 修改

阅读量331

点赞数 5

文章标签： webpack 前端

于 2024-02-27 10:46:34 首次发布

本文链接：https://blog.csdn.net/weixin_45750073/article/details/136310421

版权

本文介绍了如何在项目中使用字体图标，包括CSS文件的引用、路径修正，以及如何配置打包工具如Webpack，将字体图标和静态资源（如视频）原样打包到dist目录，保持目录结构清晰。

摘要由CSDN通过智能技术生成

字体图标的基本使用

首先将字体图标的css文件和字体文件（woff、woff2、ttf等文件）放入相应的目录，然后在字体图标的css文件中修正引入的的字体图标的路径，然后在需要使用字体图标的地方引入：
在这里插入图片描述

在这里插入图片描述

![在这里插入图片描述](https://img-blog.csdnimg.cn/direct/bd6b7a7690814753800d58f745fecb25.png=
将字体图标的css文件中的字体文件的目录修正一下：

引入字体图标文件并使用：

在HTML文件中使用：

<div class="iconfont icon-dianhua1"></div>

运行结果：
在这里插入图片描述

字体图标的基本配置

直接打包项目，字体图标的文件就会直接放入dist目录，所以需要自己配置需要将字体图标打包到相应的目录，使目录结构更加美观。
配置文件：

{
	test: /\.(ttf|woff?2)/,//匹配字体图标文件
	//asset/resource表示使用file-loader来处理文件，会原样输出，
	// 不对文件进行额外处理
	type: "asset/resource",
	generator: {
	  // 自定义字体图标文件打包后存放的位置
	  filename: 'static/media/[hash][ext]'
	}
}

在这里插入图片描述

其他静态资源

像其他视频资源，也不需要经过处理，直接和字体图标一样原封打包输出就可以。
在字体图标的配置文件上，加上需要处理的其他静态资源即可：

{
    test: /\.(ttf|woff?2|mp3|mp4|avi)$/,//匹配字体图标文件、或者其他不需要处理的静态资源
     //asset/resource表示使用file-loader来处理文件，会原样输出，
     // 不对文件进行额外处理
     type: "asset/resource",
     generator: {
         // 自定义字体图标文件打包后存放的位置
         filename: 'static/media/[hash][ext]'
     }
 }