Webpack5 uses speed-measure-webpack5-plugin mini-css-extract-plugin to fail

package.json

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "dev": "webpack-dev-server",
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "css-loader": "^5.2.1",
    "html-webpack-plugin": "4.5.2",
    "mini-css-extract-plugin": "^1.5.0",
    "speed-measure-webpack5-plugin": "^1.3.3",
    "style-loader": "^2.0.0",
    "tapable": "^2.2.0",
    "webpack": "5.0.0-rc0.6",
    "webpack-cli": "^4.6.0",
    "webpack-dev-server": "^2.9.4"
  }
}

webpack.config.js

var webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin'); // 生成html
var path = require('path')

const MiniCssExtractPlugin = require('mini-css-extract-plugin'); // 将CSS提取出来，而不是和js混在一起
const ROOT_PATH = path.resolve(__dirname)
const OUTPUT_PATH =path.resolve(ROOT_PATH,'bundle')
const SpeedMeasurePlugin = require('speed-measure-webpack5-plugin'); // 测量各个插件和loader所花费的时间
const bmp = new SpeedMeasurePlugin();
const prodConfig = {
  mode: 'production',
    entry: {
      index: "./src/index.js",
      utils: './src/utils.js',
    },
    output:{
        publicPath:'/',
        path:OUTPUT_PATH,
        filename: "[name].[hash].js",  // 改为 hash
    },
    devtool:'inline-source-map',
    devServer:{
        hot:true,
        publicPath:'/',
        contentBase:path.resolve(OUTPUT_PATH)
    },

    module:{
        rules:[
            {
                test:/\.js?$/,
                loader:'babel-loader',
                exclude:/node_modules/
            },
          {
            // .css 解析
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
          },
        ]
    },

    plugins:[
      new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash].css',
        chunkFilename: 'css/[id].[contenthash].css',
        ignoreOrder: false,
      }),
      new HtmlWebpackPlugin({
        filename: 'index.html', // 生成的html存放路径，相对于 output.path
        template: './public/index.html', // html模板路径
      }),
    ],
    resolve:{
        extensions:['.js']
    }
}

module.exports = bmp.wrap(prodConfig);

error info

Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
Error: You forgot to add 'mini-css-extract-plugin' plugin (i.e. `{ plugins: [new MiniCssExtractPlugin()] }`), please read https://github.com/webpack-contrib/mini-css-extract-plugin#getting-started
    at Object.pitch (/Users/chunhaiguo/study/react-latest/node_modules/mini-css-extract-plugin/dist/loader.js:50:14)

My usage follows the example. Told me there was no new MinicsSexTractPlugin ()

I hope to ask the reason

[alexander-akait]

webpack already do it without plugin, try to use webpack --profile or Profile plugin, in v5 we improve plugin and now calculate loaders/plugins/etc, so you don’t need this plugin anymore

[getSpidd]

@alexander-akait Do you mean speed-measure-webpack5-plugin? I wanted to use this plugin to analyze the Webpack packaging process and time, and optimize it accordingly