webpack如何重写字体的引用路径，让所有引用的字体资源打包后能集中到某个指定文件夹中?

Question

这边在给一个样式资源用webpack5做一个打包的整合,打包出来后发现，字体和css在同一个目录中

这边想让字体打包到目录中的一个子目录custom_fonts/下，然后css在主目录，同时css中的字体文件引用路径也会自动添加custom_fonts/的前缀路径，有什么办法能实现吗？

PS: 这边尝试过用file-loader，将字体资源全部调整到custom_fonts/，但是发现字体资源现在分别在主目录和custom_fonts/都有一份了，同时css中引用的路径还是主目录的字体资源。（相当于custom_fonts/的资源打包了个寂寞）

这边附上webpack的配置

const path = require('path')
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
  mode: 'production',
  entry: './index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js'
  },
  resolve: {
    extensions: ['.ts', '.js', '.scss', '.css']
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: [
          {
            loader: 'file-loader',
            options: {
              name: '[hash].[ext]',
              outputPath: 'fonts/', // 输出路径
            }
          }      
        ]
      },
      {
        test: /\.scss$/,
        use: [
          MiniCssExtractPlugin.loader,
          { loader: 'css-loader', options: { importLoaders: 2 } },
          'resolve-url-loader',
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }   
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css', // 输出的CSS文件名
    }),
  ]
}