webpack加载图标、字体等资源

加载图标、字体等资源

我使用的是阿里的图标库，下载好图标之后创建一个新文件夹media，并将下载的图标文件中的iconfont.css移动到css文件夹中

然后将该css依赖的.ttf、.woff、.woff2文件移动到media中

然后在webpack.config.js中添加rule配置

{
    test: /\.(ttf|woff2?)$/, //匹配相对应的文件路径
    type: "asset/resource",
    generator: { // 输出文件夹指定，hash:10代表取10位hash值
    	filename: "static/media/[hash:10][ext][query]"
    }
}

然后按照阿里图标库的使用方式在html中添加该图标

最后运行打包命令npx webpack即可，刷新打开的项目网页即可看到效果