How to build webpack?

Question

JavaScript

Content

package.json

{
  "name": "netflix",
  "version": "1.0.0",
  "description": "<p align=\"center\">   <img class = \"wordz\" src = \"img/TitlePicture.png\" > </p>",
  "main": "./src/main.js",
  "scripts": {
    "start": "node server",
    "tmpl": "puglatizer -d src/views -o src/templates.js",
    "scss": "node-sass src/index.scss -o src/",
    "prestart": "npm run scss && npm run tmpl",
    "lint": "eslint src/",
    "lint-fix": "eslint --fix src/",
    "prepare": "husky install",
    "build": "webpack",
    "serve": "webpack-dev-server --mode-development",
    "deploy": "npm run build",
    "dev": "webpack serve --mode development --env development ./webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/core": "^7.13.14",
    "@babel/preset-env": "^7.13.12",
    "babel-loader": "^8.2.2",
    "cors": "^2.8.5",
    "css-loader": "^5.2.0",
    "express": "^4.17.1",
    "node-sass": "^5.0.0",
    "puglatizer": "^1.2.0",
    "sass-loader": "^11.0.1",
    "style-loader": "^2.0.0",
    "tmpl": "^1.0.4",
    "url-loader": "^4.1.1",
    "webpack-dev-server": "^3.11.2"
  },
  "devDependencies": {
    "@webpack-cli/init": "^1.1.3",
    "dotenv-webpack": "^7.0.2",
    "eslint": "^7.22.0",
    "html-webpack-plugin": "^5.3.1",
    "husky": "^5.1.3",
    "lint-staged": "^10.5.4",
    "pug": "^2.0.4",
    "pug-loader": "^2.4.0",
    "webpack": "^5.30.0",
    "webpack-cli": "^4.6.0"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/frontend-park-mail-ru/2021_1_RedTech.git"
  },
  "bugs": {
    "url": "https://github.com/frontend-park-mail-ru/2021_1_RedTech/issues"
  },
  "homepage": "https://github.com/frontend-park-mail-ru/2021_1_RedTech#readme"
}

Here is a config

webpack.config.js

const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const path  =  require('path');

const PATHS  =  {
    public:  path.resolve(__dirname, 'src'),
};

module.exports = {
    entry: `${PATHS.public}/main.js`,
    output: {
        filename: 'bundle.js'
    },

    devtool: 'source-maps',

    module: {
        rules: [
            { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
            { test: /\.png$/, use: [
                {
                    loader: 'url-loader',
                    options: {
                        mimetype: 'image/png',
                    }
                }
            ]},
            { test: /\.css$/, loader: ['style-loader', 'css-loader']},
            { test: /\.scss$/, loader: ['style-loader', 'css-loader', 'sass-loader']},
        ]
    },

    devServer: {
        contentBase: 'src',
        hot: true,
        open: true,
        port: 8000,
        watchContentBase: true,
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new HtmlWebpackPlugin({
            template: 'src/index.html',
            filename: 'index.html',
            inject: 'body'
        }),
        new Dotenv(),
    ]
};

The project structure is as follows

. I build webpack through this config

webpack --config ./webpack.config.js

The project is not built and throws the following error

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.devtool should match pattern "^(inline-|hidden-|eval-)?(nosources-)?(cheap-(module-)?)?source-map$".
   BREAKING CHANGE since webpack 5: The devtool option is more strict.
   Please strictly follow the order of the keywords in the pattern.
 - configuration.module.rules[3] should be one of these:
   ["..." | object { compiler?, dependency?, descriptionData?, enforce?, exclude?, generator?, include?, issuer?, issuerLayer?, layer?, loader?, mimetype?, oneOf?, options?, parser?, realResource?, resolve?, resource?, resourceFragment?, resourceQuery?, rules?, sideEffects?, test?, type?, use? }, ...]
   -> A rule.
   Details:
    * configuration.module.rules[3].loader should be a non-empty string.
      -> A loader request.

What could be wrong?