Webpack 字体图标

引言

Webpack 5 内置的 Asset Modules 同样支持字体文件的打包处理，无需安装额外 Loader，可直接将 eot、ttf、woff 等字体文件输出到指定目录，完美适配阿里巴巴矢量图标库等第三方字体资源。

字体文件

https://www.iconfont.cn/

首先，在项目的 src/assets 目录下创建一个名为 fonts 的文件夹，并从阿里巴巴矢量图标库下载所需的字体文件（例如 iconfont.css、iconfont.ttf、iconfont.woff、iconfont.woff2）并放入该文件夹中。

修改配置文件

打开 webpack.config.js 文件，添加新的规则以支持字体文件的处理：

// ESM 模式导入 Node.js 模块
import path from 'path';
import { fileURLToPath } from 'url';
// ESM 模式导入 HTML 插件
import HtmlWebpackPlugin from 'html-webpack-plugin';

// 手动兼容 __dirname（Node.js ESM 无内置变量，必须配置）
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);

// ESM 标准导出配置
export default {
    // 指定入口文件
    entry: "./src/index.ts",
    // 指定打包文件所在目录
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    // 模块解析
    resolve: {
        // 自动补全文件后缀
        extensions: ['.js', '.ts', '.css', '.less', '.vue']
    },
    // 配置 Webpack 加载规则
    module: {
        rules: [
            {
                test: /\.ts$/,
                use: 'ts-loader',
                // 修复错误：标准依赖目录名称
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /\.less$/,
                use: ["style-loader", "css-loader", "less-loader"]
            },
            {
                test: /\.(png|jpg|gif|jpeg)$/i,
                // 自动判断：大于 8 KB 输出文件，小于 8 KB 转为 base64
                type: 'asset',
                generator: {
                    filename: 'images/[name].[hash:4][ext]'
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/i,
                // 固定输出资源文件：不做 base64 转换，直接复制到打包目录
                type: 'asset/resource',
                generator: {
                    // 输出到 dist/fonts 目录
                    // [name] 原文件名，[hash:4] 4 位哈希值，[ext] 文件后缀
                    filename: 'fonts/[name].[hash:4][ext]'
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html'
        })
    ]
};

引入字体图标

确保在入口文件 index.ts 中引入字体图标的 CSS 文件，让 Webpack 识别并打包字体资源：

// src/index.ts
import './less/index.less';
import './assets/fonts/iconfont.css';

使用字体图标

打开 public/index.html 文件，添加字体图标并设置样式（html-webpack-plugin 会自动注入脚本，无需手动添加）：

<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>首页</title>
</head>
<body>
    <h1>Hello Webpack</h1>
    <!-- 使用字体图标 -->
    <i class="iconfont icon-logout"></i>
    <!-- 自定义图标样式 -->
    <i class="iconfont icon-logout" style="font-size: 20 px; color: yellow"></i>
</body>
</html>

执行打包命令

保存所有更改后，回到终端，执行打包命令：

npm run build

执行完命令后，进入项目的 dist 目录查看打包结果：

目录中自动生成 fonts 文件夹，存放打包后的字体文件
打开 index.html，页面中的字体图标正常显示，证明字体资源已成功打包