webpack之处理字体图标资源（附带音视频）

许愿的星星

于 2023-03-26 16:37:47 发布

阅读量339

点赞数

分类专栏：周记文章标签： webpack 音视频 javascript

本文链接：https://blog.csdn.net/m0_64562972/article/details/129780911

版权

周记专栏收录该内容

37 篇文章 1 订阅

订阅专栏

这周的话没啥好写的，把上周记得笔记直接发出来吧。水一下水一下博客。

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>
    <!-- 准备一个使用样式的dom容器 -->
    <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>
    <!-- 引入打包后的js文件，才能看到效果 -->
    <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');
}