Webpack无法正确编译我的字体文件

Question

src/Index.jsx具有这样的导入：

import '../css/style.css';

/** the rest of the code**/

css/style/css具有如下的url（）：

### style.css
@font-face {
    font-family: 'Pe-icon-7-stroke';
    src:url('.../fonts/Pe-icon-7-stroke.eot?d7yf1v');
    src:url('../fonts/Pe-icon-7-stroke.eot?#iefixd7yf1v') format('embedded-opentype'),
        url('../fonts/Pe-icon-7-stroke.woff?d7yf1v') format('woff'),
        url('../fonts/Pe-icon-7-stroke.ttf?d7yf1v') format('truetype'),
        url('../fonts/Pe-icon-7-stroke.svg?d7yf1v#Pe-icon-7-stroke') format('svg');
    font-weight: normal;
    font-style: normal;
}

每次编译组件时，webpack配置和插件（加载程序）都将url（）保持不变，而无需将字体文件打包到build文件夹中。

这是我的webpack配置：

// webpack v4
const { join, resolve } = require( 'path' );
const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' );
const HtmlWebpackPlugin = require( 'html-webpack-plugin' );
// const CopyWebpackPlugin = require( 'copy-webpack-plugin' );
const WebpackMd5Hash = require( 'webpack-md5-hash' );
const CleanWebpackPlugin = require( 'clean-webpack-plugin' );
const autoprefixer = require( 'autoprefixer' );

const devMode = process.env.npm_lifecycle_event !== 'build';

const CSSModuleLoader = {
    loader: 'css-loader',
    options: {
        modules: false,
        localIdentName: '[local]_[hash:base64:5]',
        sourceMap: true,
        url: false
    }
};

const postCSSLoader = {
    loader: 'postcss-loader',
    options: {
        ident: 'postcss',
        sourceMap: true,
        plugins: () => [
            autoprefixer( {
                browsers: [ '>1%', 'last 4 versions', 'Firefox ESR', 'not ie < 9' ]
            } )
        ]
    }
};

module.exports = env => ( {
    entry: join( __dirname, 'src', 'index.jsx' ),
    output: {
        filename: 'bundle.js',
        path: resolve( __dirname, 'dist' )
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader'
                }
            },
            {
                test: /\.(png|svg|jpg|gif|ico|jpeg)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            limit: 8192
                        }
                    }
                ]
            },
            {
                test: /\.woff$/,
                loader: 'url-loader?limit=10000&mimetype=application/font-woff&name=[name].[ext]'
            },
            {
                test: /\.[ot]tf$/,
                loader: 'url-loader?limit=10000&mimetype=application/octet-stream&name=[name].[ext]'
            },
            {
                test: /\.eot$/,
                use: 'url-loader?limit=65000&mimetype=application/octet-stream&name=public/fonts/[name].[ext]'
            },
            {
                test: /\.woff2$/,
                use: 'url-loader?limit=65000&mimetype=application/font-woff&name=public/fonts/[name].[ext]'
            },
            {
                test: /\.(sa|le|sc|c)ss$/,
                use: [
                    devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
                    CSSModuleLoader,
                    postCSSLoader,
                    {
                        loader: 'resolve-url-loader'
                    },
                    /**
                    {
                        loader: 'less-loader',
                        options: {
                            includePaths: [ resolve( '../node_modules' ) ]
                        }
                    }**/
                    {
                        loader: 'sass-loader',
                        options: {
                            sourceMap: true
                        }
                    }
                ]
            }
        ]
    },
    plugins: [
        new CleanWebpackPlugin( 'dist', {} ),
        new MiniCssExtractPlugin( {
            filename: '[name].[hash].css',
            chunkFilename: '[id].[hash].css'
        } ),
        new HtmlWebpackPlugin( {
            inject: true,
            template: './src/index.html',
            filename: 'index.html',
            favicon: './src/assets/images/core-img/favicon.ico'
        } ),
        new WebpackMd5Hash()
    ],
    devServer: {
        host: 'localhost'
    },
    devtool: 'sourcemap',
    resolve: {
        extensions: [ '.ts', '.tsx', '.js', '.jsx', '.scss', '.css', '.less', 'sass' ],
        alias: {
            // '../../theme.config$': join( __dirname, 'my-semantic-theme/theme.config' )
        }
    }
} );

因此，归根结底，存在两个问题，即“字体文件”没有传输到构建文件夹中，并且url（）未被重新格式化以更好地解决构建文件夹中的问题。

请，我真的需要这个答案，我已经回答了一段时间了。

非常感谢您。