Webpack处理字体图标资源

处理字体图标资源

1、下载字体图标资源

• 打开阿里巴巴矢量图标库
• 选择想要的图标添加到购物车，统一下载到本地

2、添加字体图标资源

• src/fonts/iconfont.ttf

• src/fonts/iconfont.woff

• src/fonts/iconfont.woff2

• src/fonts/iconfont.css
  注意字体文件路径需要修改

• src/main.js

// 引入资源，webpack才会对其打包
import "./css/iconfont.css"

@webpack.config.js

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