Webpack 如何使用网页包加载字体

我在使用Webpack4正确加载字体时遇到问题，希望有人能给我指明正确的方向

我的网页包配置

const path = require('path')
const ExtractTextPlugin = require('extract-text-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/scripts/index.js',
    mode: 'development',
    performance: { hints: false },
    output: {
        path: path.resolve(__dirname, '../build'),
        publicPath: path.resolve(__dirname, '../build'),
        filename: 'bundle.js',
    },
    module: {
        rules: [{
            test: /\.js$/,
            exclude: /node_modules/,
            use: [{
                loader: 'babel-loader',
                options: {
                    presets: ['env'],
                    plugins: [
                        ['transform-class-properties'],
                        ['transform-object-rest-spread'],
                    ],
                },
            }, {
                loader: 'eslint-loader'
            }]
        }, {
            test: /\.(png|jpg|gif|json|mp4|ico)$/,
            use: [{
                loader: 'file-loader',
                options: {
                    name: './assets/[name].[ext]',
                },
            }, ],
        }, {
            test: /\.(scss)$/,
            use:ExtractTextPlugin.extract({
                fallback:'style-loader',
                use: ['css-loader','sass-loader']
            }),
        }, {
            test: /\.css$/,
                use: {
                    loader: 'css-loader',
                    options: { url: false }
                }
        }, {
            test: /\.(woff(2)?|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, 
            loader: "file-loader"
        }, ],
    },
    plugins: [
        new ExtractTextPlugin({
            filename: 'style.css',
        }),
        new CopyWebpackPlugin(
            [{
                from: './src',
                to: './',
                force: true,
            }, ], {
                ignore: ['*.js', '*.css', '.DS_Store'],
            },
        ),
    ],
}

我的入口点是点击src/scripts/index，它将导入我的SCSS文件

import '../style/main.scss'

在main.scss中，我导入了另一个scss文件

// Typography
@import "typography/font-face";

$base-fonts-path : '../assets/fonts';

@font-face {
    font-family: 'cardowalsheim';
    src: url('#{$base-fonts-path}/GTWalsheimProThin.eot');
    src: url('#{$base-fonts-path}/GTWalsheimProThin.eot?#iefix') format('embedded-opentype'),
    url('#{$base-fonts-path}/GTWalsheimProThin.woff') format('woff'),
    url('#{$base-fonts-path}/GTWalsheimProThin.ttf') format('truetype'),
    url('#{$base-fonts-path}/GTWalsheimProThin.svg#114f83b1372052e00fe6210ffd8e061d') format('svg');
    font-style: normal;
    font-weight: 200;
}

我看到的是，它似乎确实加载了字体，但仍然没有显示在前面

当我在Chrome上检查网络请求时，它似乎重命名了文件，可能是因为什么原因？我不能完全肯定

---

您的项目在Git上可用吗？如果可能，您可以共享链接，以便有人可以克隆它并尝试调试它。您的项目在Git上可用吗？如果可能，您可以共享链接，以便有人可以克隆它并尝试调试它。