Webpack5如何打包字体资源到指定目录并自动更新CSS路径？

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之前
          {
            loader: 'sass-loader',
            options: { sourceMap: true }
          }   
        ]
      }
    ]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: 'styles.css', // 输出的CSS文件名
    }),
  ]
};

options: {
  name: '[hash].[ext]',
  outputPath: 'custom_fonts/', // 修改输出路径
}