webpack之处理字体图标资源（附带音视频）
这周的话没啥好写的，把上周记得笔记直接发出来吧。水一下水一下博客。
1.下载图标文件
1.打开iconfont-阿里巴巴矢量图标库
2.选择需要的图标，下载到本地（如不会下载，可以看vue前端项目引入iconfont阿里图标（font class）_fontclass vue引用_山上有晚星的博客-CSDN博客）
2.添加字体图标资源
-
src/fonts/iconfont.ttf -
src/fonts/iconfont.woff -
src/fonts/iconfont.woff2 -
src/css/iconfont.css- 字体文件路径需要修改
-
src/main.js -
src/main.js
import count from "./js/count";
import sum from "./js/sum";
// 引入资源，Webpack才会对其打包
import "./css/demo.css"
import "./css/iconfont.css";
import "./css/index.css";
import "./less/index.less";
import "./sass/index.sass";
import "./scss/index.scss";
console.log(count(2, 1));
console.log(sum(1, 2, 3, 4));
- public/index.html
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webpack5配置title>
head>
<body>
<div class="box1">div>
<div class="box2">div>
<div class="box3">div>
<div class="box4">div>
<i class="iconfont icon-binggan">i>
<i class="iconfont icon-chengzi">i>
<script src="../dist/static/js/main.js">script>
body>
html>
3.配置
// 加载器
module:{
rules:[
{
test: /\.(ttf|woff2?|map4|map3|avi)$/,
type: "asset/resource",
generator: {
filename: "static/media/[hash:8][ext][query]",
},
},
],
},
type:"asset/resource"和type:"asset"区别：
type:"asset/resource"相当于file-loader，将文件转化为Webpack能识别的资源，其他不做处理
type:"asset"相当于url-loader,将文件转化成 Webpack 能识别的资源，同时小于某个大小的资源会处理成 data URI 形式
4.运行指令npx webpack
5.注意：报错处理（字体路径未修改）
这部分报错处理：Module not found: Error: Can't resolve 'iconfont.woff2?t=1678527093592' in 'E:\vscode_demo\study\vuejs学习\Webpack5配置\src\css'
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-utgpU1gi-1679819574195)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20230311203205314.png)]
原因是src/css/iconfont.css里面的问题字体文件路径没有改
@font-face {
font-family: "iconfont"; /* Project id 3946278 */
src: url('iconfont.woff2?t=1678527093592') format('woff2'),
url('iconfont.woff?t=1678527093592') format('woff'),
url('iconfont.ttf?t=1678527093592') format('truetype');
}
这里改为（根据自己的文件路径修改）
@font-face {
font-family: "iconfont"; /* Project id 3946278 */
src: url('../fonts/iconfont.woff2') format('woff2'),
url('../fonts/iconfont.woff') format('woff'),
url('../fonts/iconfont.ttf') format('truetype');
}