使用MiniCssExtractPlugin报错MiniCssExtractPlugin is not a constructor

在引入插件的时候后面加上.default即可解决报错问题 （具体原因不知）
我原本 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’)这样写，一直报错
后来加上就好了 const MiniCssExtractPlugin = require(‘mini-css-extract-plugin’).default

const path = require('path')
// 引入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 引入MniCssExtractPlugin插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin').default


module.exports = {
  entry: './src/index.js', // 入口文件 （默认此入口）
  output: {
    filename: 'bundle.js', // 打包后的文件名称	（默认main.js）
    path: path.resolve(__dirname, './dist'), // 生成的文件位置以及文件夹名称 （默认根目录 dist）
    assetModuleFilename: 'images/[contenthash][ext]', // 指定生成的文件目录以及文件名称
  },
  mode: 'development', //配置打包模式 （默认该模式）
  plugins: [
    new HtmlWebpackPlugin({
      template: './src/index.html', //指定生成的HTML格式模板
      filename: 'index.html', // 指定生成的html文件名称
      inject: 'body', // 将script标签显示位置修改到body里面（默认在head里面）
    }), // 创建对象

    new MiniCssExtractPlugin() // 创建MniCssExtractPlugin插件
  ],

  devtool: 'inline-source-map', // 设置开发模式下追踪代码 （展示报错的目标文件）

  devServer: {
    static: './dist',
  },

  module: {
    // 配置资源文件
    rules: [
      {
        test: /\.png$/,
        type: 'asset/resource', // 将png结尾的文件打包成单独文件并导出URL （通过f12查看可以看到打包生成的png格式文件，img标签引入了该地址）
        generator: {
          filename: 'images/[contenthash][ext]', // 指定生成的文件夹及文件名称
        },
      },
      {
        test: /\.txt$/,
        type: 'asset/source',
      },
      {
        test: /\.jpg$/,
        type: 'asset',
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024 * 1024, // 设置临界值4M (1024*1024是1M)
          },
        },
      },
      {
        test: /\.css$/, // 配置正则表达式，对css文件进行处理
        use: [MiniCssExtractPlugin.loader, 'css-loader'], // 配置多个loader时需要写成数组形式 （use里面loader解析的顺序是从右往左）
      },
    ],
  },
}