在 webpack 5 中，可以通過內置的 Asset 模塊，接收並加載任何文件，然後將其輸出到構建目錄。這樣，將 Asset 模塊用於任何類型的文件，即其也可以處理字體文件。

初始化示例工程

創建一個字體示例工程：webpack-fonts，然後在目錄webpack-fonts執行相關初始化工作：

mkdir webpack-fonts
cd webpack-fonts
npm init -y
npm install webpack webpack-cli --save-dev

工程目錄結構： webpack5資源管理三之加載字體文件使用詳解

工程初始化目錄結構

加載及配置字體資源

從系統中找到字體資源微軟雅黑，共三個文件：msyh.ttc、msyhl.ttc、msyhbd.ttc，然後把這個三個字體文件放到工程的src目錄下。 webpack5資源管理三之加載字體文件使用詳解

字體列表

編寫一個樣式文件style.css放入工程的src目錄，在樣式文件中引入字體文件，其style.css的文件內容如下：

@font-face {
    font-family: 'msyh';
    src: url('./msyh.ttc');
}
  
.webpack-font-msyh {
    font-family: 'msyh';
}

@font-face {
    font-family: 'msyhbd';
    src: url('./msyhbd.ttc');
}

.webpack-font-msyhbd {
    font-family: 'msyhbd';
}

@font-face {
    font-family: 'msyhl';
    src: url('./msyhl.ttc');
}

在dist/index.html中添加對樣式的引用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webpack 資源引用字體示例</title>
    <script src="bundle.js"></script>
</head>
<body>
    <div class="webpack-font-msyh">msyh</div>
    <div class="webpack-font-msyhbd">msyhbd</div>
    <div class="webpack-font-msyhl">msyhl</div>
</body>
</html>

在src/index.js文件中，添加style.css的引用：

import './style.css'

最後在本地安裝樣式loader

npm install style-loader css-loader --save-dev

然後配置內置Asset 對應的文件解析規則，其webpack.config.js的配置內容如下：

const path= require('path')

module.exports = {
    entry: "./src/index.js",
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname,'dist')
    },
    module: {
        rules: [
            {
                test: /.css$/i,
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.(ttc|woff|woff2|eot)$/i,
                type: 'asset/resource'
            }
        ]
    }
}

其中package.json請參考webpack資源管理一之加載 CSS使用詳解中的package.json文件內容，然後執行項目構建操作，npm run build

npm run build

> webpack-fonts@1.0.0 build D:workwebpack5webpack-fonts
> webpack

asset 8509756933a61d2bb349.ttc 18.7 MiB [emitted] [immutable] [from: src/msyh.ttc] [big] (auxiliary name: main)
asset 1192744f6d4a8556eef2.ttc 16 MiB [emitted] [immutable] [from: src/msyhbd.ttc] [big] (auxiliary name: main)
asset 33cbc54e3a13fb6ab968.ttc 11.6 MiB [emitted] [immutable] [from: src/msyhl.ttc] [big] (auxiliary name: main)
asset bundle.js 4.97 KiB [emitted] [minimized] (name: main)
runtime modules 1.7 KiB 5 modules
orphan modules 326 bytes [orphan] 1 module
cacheable modules 10.9 KiB (javascript) 46.4 MiB (asset)
  javascript modules 10.8 KiB
    modules by path ./node_modules/ 9.04 KiB
      ./node_modules/style-loader/dist/runtime/injectStylesIntoStyleTag.js 6.67 KiB [built] [code generated]
      ./node_modules/css-loader/dist/runtime/api.js 1.57 KiB [built] [code generated]
      ./node_modules/css-loader/dist/runtime/getUrl.js 830 bytes [built] [code generated]
    modules by path ./src/ 1.75 KiB
      ./src/index.js + 1 modules 346 bytes [built] [code generated]
      ./node_modules/css-loader/dist/cjs.js!./src/style.css 1.42 KiB [built] [code generated]
  asset modules 126 bytes (javascript) 46.4 MiB (asset)
    ./src/msyh.ttc 42 bytes (javascript) 18.7 MiB (asset) [built] [code generated]
    ./src/msyhbd.ttc 42 bytes (javascript) 16 MiB (asset) [built] [code generated]
    ./src/msyhl.ttc 42 bytes (javascript) 11.6 MiB (asset) [built] [code generated]

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value. Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

WARNING in asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
This can impact web performance.
Assets:
  8509756933a61d2bb349.ttc (18.7 MiB)
  1192744f6d4a8556eef2.ttc (16 MiB)
  33cbc54e3a13fb6ab968.ttc (11.6 MiB)

WARNING in webpack performance recommendations: 
You can limit the size of your bundles by using import() or require.ensure to lazy load some parts of your application.
For more info visit https://webpack.js.org/guides/code-splitting/

webpack 5.11.1 compiled with 3 warnings in 4414 ms

然後打開dist目錄，查看文件：