如何使用webpack 4加载和提取字体？

Question

我正在学习webpack并发现一些麻烦要知道

哪种webpack加载程序可方便地加载字体以在本地托管它们，“ URL loader” 对我来说很好

但是它产生的字体为 base64 ，我并不是想要提取字体。

我尝试了“文件加载器”，但是看起来我无法获得正确的配置，或者它与 webpack 4 不兼容，我不知道吗？< / p>

这是我的配置设置，使用 URL加载程序可以正常运行：

const HTMLWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports={
    module:{
        rules:[
            {
                test:/.js$/,
                use:['babel-loader'],
                exclude:/node_modules/,

            },
            {
                test:/\.(pug)$/,
                loader:'pug-loader',
                query:{
                    pretty:false
                },
                exclude:/node_modules/,
            },
            {
                test: /\.scss$/,
                use: [
                    MiniCssExtractPlugin.loader, 
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true
                        }
                    }, 
                    {
                        loader: 'postcss-loader',
                        options: {
                            sourceMap: true
                        }
                    }, 
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true,
                        }
                    } 
            ]
            },
            {
                test:/\.(png|jpe?g|gif)$/i,
                use:[
                    {
                        loader:'file-loader',
                        options:{
                            name:'[name].[ext]',
                            outputPath:'imgs'
                        }
                    }
                ]
            },
            {
                test:/\.(woff)$/i,
                use:[
                    {
                        loader:'url-loader',
                    }
                ]
            },
        ]
    },

    plugins:[
        new CleanWebpackPlugin(),
        new HTMLWebpackPlugin({
            template:'./src/pug/home.pug',
            filename: "index.html",
        }),
        new HTMLWebpackPlugin({
            template:'./src/pug/about.pug',
            filename: "about.html",
        }),
        new MiniCssExtractPlugin(),
        new OptimizeCSSAssetsPlugin({ 
            cssProcessorOptions: { 
                map: { 
                    inline: false, 
                    annotation: true, 
                } 
            } 
            })

    ],

}

这是我的树结构：

C:\~\src
├── assets
|  ├── fonts
|  |  ├── dorid-bold.woff
|  |  └── dorid-Medium.woff
|  └── images
├── index.js
├── pug
|  ├── about.pug
|  ├── abstracts
|  |  ├── base.pug
|  |  └── mixins.pug
|  ├── components
|  |  └── _social-comp.pug
|  ├── home.pug
|  └── layout
|     ├── _footer.pug
|     └── _header.pug
└── sass
   ├── abstracts
   |  ├── _func.scss
   |  ├── _mixin.scss
   |  └── _vars.scss
   ├── base
   |  ├── _base.scss
   |  └── _fonts.scss
   ├── components
   ├── layout
   |  ├── _footer.scss
   |  ├── _header.scss
   |  └── _nav.scss
   ├── main.scss
   ├── pages
   └── vendors