Error when packaging with extract-text-webpack-plugin

I am using webpack4,. I would like to try to package the CSS file separately. The code is as follows:

const path = require("path");
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const extractWebpackPlugin = require("extract-text-webpack-plugin");

const isDev = process.env.NODE_ENV === "development";

const config = {
  target: "web",
  mode: "development",
  entry: path.join(__dirname, "src/index.js"),
  output: {
    filename: "bundle.[hash].js",
    path: path.join(__dirname, "dist")
  },
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
      {
        test: /\.css$/,
        use:[
          "style-loader",
          "css-loader"
        ]
      },
      {
        test: /\.js?$/,
        loader: "babel-loader"
      },
      {
        test: /\.(jpg|jpeg|gif|bmp|png)$/,
        use:[
          {
            loader: "url-loader",
            options: {
              limit: 1024,
              name: "[name]-[hash].[ext]"
            }
          }
        ]
      },
      {
        test: /\.styl(us)?$/,
        use:[
          "style-loader",
          "css-loader",
          "stylus-loader"
        ]
      }
    ]
  },
  plugins:[
    new VueLoaderPlugin(),
    new HtmlWebpackPlugin(),
    new webpack.DefinePlugin({
      "process.env":{
        NODE_ENV: isDev ? ""development"" : ""production""
      }
    }),
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NoEmitOnErrorsPlugin()
  ]
}

if(isDev){
  config.module.rules.push({
    test: /\.styl(us)?$/,
      use:[
      "style-loader",
      "css-loader",
      "stylus-loader"
    ]
  });
  config.devtool = "-sharpcheap-module-eval-source-map";   //
  config.devServer = {
    port: 8888,
    host: "0.0.0.0",
    overlay:{
      errors: true   //
    },
    hot: true
  }
} else{
  config.output.filename = "[name].[hash].js";
  config.module.rules.push(
    {
      test: /\.css$/,
      use: extractWebpackPlugin.extract({
        fallback: "style-loader",
        use: ["css-loader"]
      })
    }
    //{
    //  test: /\.styl(us)?$/,
    //  use: extractWebpackPlugin.extract({
    //    fallback: "style-loader",
    //    use: [
    //      "css-loader",
    //      "stylus-loader"
    //    ]
    //  })
    //}
  );
  config.plugins.push(
    new extractWebpackPlugin("styles.css")
  )

}

module.exports = config;

an error occurred while running npm run build:

I really don"t know why. Please give me your advice. Thank you.

Webpack4

Mar.29,2021