Webpack 配置 Iconfont 字体文件加载指南

初次接触 Webpack 时，加载图片和 JS 文件通常不会遇到报错。但在引入 Iconfont 字体文件时，可能会遇到错误。本文旨在分享在 Webpack 环境下使用 Iconfont 的正确方法。

修改 CSS 字体文件路径

第一步：修改 CSS 中字体文件的路径。

建议将 CSS 文件与字体文件放置在同一个目录下。

打开 iconfont.css 文件，查看其中引用字体文件的路径。默认情况下，这些路径可能使用的是传统的 CSS 引用方式，具体表现如原图所示。

在传统的同级目录引用中，直接使用文件名即可。

若字体文件位于上一级目录，则需使用 ../ 进行引用。

然而，在 Webpack 环境下，我们需要将路径修改为符合 Webpack 引用规则的形式，具体调整如原图所示。

在 Webpack 规则下，同级目录的引用应改为 ./。

上一级目录的引用方式仍保持为 ../。

配置字体文件加载器

第二步：配置如何加载 woff 等字体文件。

Webpack 需要通过配置 loader 来声明如何加载特定类型的文件，因此我们需要在配置文件中添加相关声明。

在开始配置之前，请先安装 url-loader 和 file-loader。

接下来，在 webpack 配置文件的 loaders 部分进行具体配置。

经过上述配置，字体文件最终将以字符的形式保存在生成的 CSS 文件中。

以上即为在 Webpack 中使用 Iconfont 字体图标的完整方法，希望能为大家提供参考。