webpack打包字体文件后无法加载，显示failed to decode downloaded font

项目场景：

使用webpack打包字体文件，例如iconfont.svg、iconfont.eot、iconfont.ttf等。

---

问题描述

webpack打包字体文件后无法加载，显示failed to decode downloaded font。

webpack打包字体文件之后，字体图标不展示，显示一个小框，检查之后确认字体图标的样式已经设置上，但就是没有展示，打开控制台，展示如下图所示的报错。

• 使用file-loader和ur-loader都无法实现

{
	test:/\.(svg|eot|ttf)$/,
	use:{
		loader:'file-loader'
	}
}

或者

{
	test:/\.(svg|eot|ttf)$/,
	use:{
		loader:'url-loader'
	}
}

图标样式不展示，展示的是一个小方框。

---

解决方案：

使用asset/resource，可以正常展示，百度的，至于为啥不清楚。

{
    test: /\.ttf$/,
    type: 'asset/resource'
}

注意注意，这里还有个坑，引入的字体文件可能会不生效，这个时候就需要检查一下webpack.config.js文件里面css-loader的配置项是否有modules：true这个，意思是模块化的css，css只在当前模块内有效，这里就需要看你的项目是否需要，不需要模块化就将这个配置项删除，不然样式不生效，需要的话，就用它的方式引入样式。