入坑webpack，開始加載一些圖片、js文件什么的都沒有報錯，今天正好下了iconfont字體，就出現了錯誤，所以這里分享一下怎么在webpack中使用iconfont。

1、修改css中字體文件路徑

我把css和字體文件放在同級目錄下

打開iconfont.css文件，原本的字體文件引用路徑是用的css的方式，即下面圖片中所示的

同級目錄：直接用文件名

上一級目錄：../

但是，我們是在webpack環境下使用，所以要改成webpack引用規則，即改成下面圖片所示

同級目錄： ./

上一級目錄： ../

2、配置如何加載woff等字體文件

大家都知道webpack要配置loader，聲明如何加載某類文件，所以我們要在config中聲明一下

使用之前要安裝url-loader、file-loader

在webpack的配置文件的loaders中配置

字體文件最后會以字符的形式保存在css文件中

以上這篇webpack中使用iconfont字體圖標的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持武林網。