Configuration.module has an unknown property 'loaders'?

Question

webpack

Hello. I'm trying to compile scss files into one css file in the app folder. As a result, they get an error in the console

"Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.module has an unknown property 'loaders'. These properties are valid:
   object { defaultRules?, exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, generator?, noParse?, parser?, rules?, strictExportPresence?, strictThisContextOnImports?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp? }"

package.json

{
  "name": "lets-eat",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {},
  "devDependencies": {
    "@babel/cli": "^7.13.16",
    "@babel/core": "^7.13.16",
    "@babel/node": "^7.13.13",
    "@babel/preset-env": "^7.13.15",
    "babel": "^6.23.0",
    "extract-text-webpack-plugin": "^3.0.2",
    "sass-loader": "^11.0.1",
    "webpack": "^5.35.0",
    "webpack-cli": "^4.6.0",
    "webpack-loaders": "^1.0.0"
  }
}

webpack.config.js

const path = require("path");
const ExtractTextPlugin =  require("extract-text-webpack-plugin");

let extract = (style, type) => ExtractTextPlugin.extract(style, type);

module.exports = {
  mode: "production",
  entry: "./script/main.js",
  output: {
    path: path.resolve(__dirname, "app/js"),
    filename: "bundle.js"
  },
  plugins: [
    new ExtractTextPlugin("bundle.css")
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        loader: extract("style", "css")
      },
      {
        test: /\.scss$/,
        loader:  extract("style", "css!sass")
      }
    ]
  }
}

Already changed from loaders to rules and vice versa