webpack-dev-server запускается, но не открывает страницу

Настраиваю webpack. В package установил следущее

    {
      "name": "minesweeper",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "dev": "webpack-dev-server --mode development",
        "build": "webpack --mode production",
        "test": "echo \"Error: no test specified\" && exit 1"
      },
      "author": "",
      "license": "ISC",
      "devDependencies": {
        "html-loader": "^4.2.0",
        "html-webpack-plugin": "^5.5.1",
        "webpack": "^5.82.1",
        "webpack-cli": "^5.1.1",
        "webpack-dev-server": "^4.15.0"
      }
    }

В webpack.config.js сделал так:

let path = require("path");
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: path.resolve(__dirname, 'src', 'index.js'),
    output: {
        path: path.resolve(__dirname, "dist"),
        filename: "main.js",
        publicPath: "dist/"
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, 'src', 'index.html'), // Проверьте, что путь указан правильно
        }),
    ],
}

При запуске сборки файлы собирает и все отображает нормально пока. Но как только запускаю webpack-dev-server ничего не отображается. Хотя запуск dev-server происходит без ошибок

Но в браузере по порту 8080 появляется страница с надписью Cannot GET /. И множество ошибок в консоли один из которых 404. Но почему она появляется, какой путь я не указал, я не могу понять. Подскажите пожалуйста.

в webpack.config.js добавил еще

 devServer: {
    static: {
        directory: path.join(__dirname, 'public'),
      },
      compress: true,
      port: 9000,
    },

по порту 9000 тоже самое