webpack基础_8处理字体图标资源

处理字体图标资源

1. 下载字体图标文件

1.打开阿里巴巴矢量图标库

2.选择想要的图标添加到购物车，

3.添加到项目

4.统一下载到本地

5.解压

6.打开demo_index.html

7. Fontclass方式使用
   

2. 添加字体图标资源

src/css/iconfont.css

发现iconfont.css里需要引入另外的文件，于是去引入
src/fonts/iconfont.ttf
src/fonts/iconfont.woff
src/fonts/iconfont.woff2

注意字体文件路径需要修改

src/main.js里引入这个css

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

public/index.html

因为已经再main.js里引入了样式了，所以不用再使用<link> 标签引入了。页面里会自动生产样式了。

   <!-- 使用字体图标 -->
    <i class="iconfont icon-arrow-down"></i>
    <i class="iconfont icon-ashbin"></i>
    <i class="iconfont icon-browse"></i>
    <script src="../dist/static/js/main.js"></script>

3. 配置

  {
        test: /\.(ttf|woff2?)$/,
        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 形式。

页面