get "Cannot GET /" while using webpack-dev-server

Question

I am using webpack-dev-server to run my little program, but unfortunately I get "Cannot GET /" error with this in colsole: "Failed to load resource: the server responded with a status of 404 (Not Found)".

package.json

{
  "name": "boilerplate",
  "version": "1.0.0",
  "description": "",
  "main": "input.js",
  "scripts": {
    "serve": "live-server public",
    "build": "webpack --watch",
    "dev-server": "webpack serve"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/preset-env": "^7.18.9",
    "babel-cli": "^6.26.0",
    "babel-loader": "^8.2.5",
    "babel-preset-env": "^1.7.0",
    "live-server": "^1.2.2",
    "webpack": "^5.73.0",
    "webpack-cli": "^4.10.0",
    "webpack-dev-server": "^4.9.3"
  }
}

webpack.config.js:

const path = require('path');

module.exports = {
  'mode': 'development',
  entry: path.resolve(__dirname, 'src/index.js'),
  output: {
    path: path.join(__dirname, 'public', 'scripts'),
    filename: 'bundle.js',
    clean: true,
  },
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  devServer: {
    static: {
      directory: path.resolve(__dirname, 'public'),
      publicPath: '/scripts/',
    },
    port: 8080,
    open: true,
    hot: true,
    compress: true,
    historyApiFallback: true,
  }
};

I also should add that my index.html file is located inside "public" folder. Could you please help me with this Error? The interesting point is that when I modify the static.publicPath to '/' and edit the script tag in my index.html from <script src="scripts/bundle.js"></script> to <script src="bundle.js"></script> the program fuctions appropriately.

UPDATE: I uninstalled the current version of webpack-dev-server and installed webpack-dev-server@3.11.2, and the problem was solved. It seems the problem was with the configuration of devServer in the latest version of webpack-dev-server. However, still, I do not know how to configure devServer and especifically publicPath whenusing webpack-dev-server@4.9.3. Any help would be appreciated.