[入门级]webpack使用之引入iconfont

适合读者:

刚开始接触webpack, 有基础认知, 实践经验不多; 有基础iconfont使用经验

问题背景:

使用原始方法在样式文件中插入iconfont的样式, @fontface中的src使用相对路径引入本地字体, css样式可以成功嵌入, 但图标在页面上不显示

解决方式1: webpack 资源loader设置

webpack可以打包各种静态资源文件, 比如css, 图片等, 也包括字体 iconfont的引入则属于字体引入的一种, 本地引入文件, 需要单独配置loader

在webpack.config.js文件中 loader部分加入如下配置

 module: {
    rules: [
          {
            test: /\.(ttf|woff2?)$/,
            type: "asset/resource",
            generator: {
              filename: "static/media/[hash:8][ext][query]",
           },
        //...其他loader 如css, stylus等
        /*
          {
            test: /\.css$/i,
            use: [
              "style-loader",
              "css-loader"
            ]
          },
        */
      }
    ]
  },

main.js(打包主入口)引入含有iconfont设置的css文件

import "../public/css/index.css";

iconfont文件路径参考设置如下: 注意 字体的路径需要是从主入口引入的css出发 找到字体所在文件的相对路径

@font-face {
  font-family: 'iconfont';
  src: 
      url('../../src/iconfont/iconfont.woff2?t=1683191958898') format('woff2'),
       url('../../src/iconfont/iconfont.woff?t=1683191958898') format('woff'),
       url('../../src/iconfont/iconfont.ttf?t=1683191958898') format('truetype');
}

参考路径如下:

解决方式2: 字体文件使用 cdn链接

cdn链接从iconfont官方获取

字体文件引入参考设置如下

@font-face {
  font-family: 'iconfont';
  src: url('//at.alicdn.com/t/c/font_4049217_ekjtf9yk0tm.woff2?t=1683193858876') format('woff2'),
      url('//at.alicdn.com/t/c/font_4049217_ekjtf9yk0tm.woff?t=1683193858876') format('woff'),
      url('//at.alicdn.com/t/c/font_4049217_ekjtf9yk0tm.ttf?t=1683193858876') format('truetype');
}

参考文章 Webpack5处理样式、图片、字体图标、HTML和其他媒体资源