Webpack dev server not finding index.html

I have the following webpack config:

webpack.common.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  watchOptions: {
    ignored: [
      path.resolve(__dirname, '.git'),
      path.resolve(__dirname, 'node_modules'),
    ]
  },
  module: {
    rules: [],
  },
  resolve: {
    extensions: ['.js'],
  },
  output: {
    filename: 'bundle.js',
    path: path.join(__dirname, 'dist'),
    publicPath: "/dist/",
  },
};

webpack.dev.js:

const { merge } = require('webpack-merge');
const common = require('./webpack.common.js');
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = merge(common, {
  mode: 'development',
  devtool: 'inline-source-map',
  devServer: {
    open: true,
    compress: false,
    port: 9000,
    http2: false,
    https: false,
    liveReload: true,
    watchFiles: ['src/**/*'],
    client: {
      overlay: false,
    },
    static: {
      directory: __dirname,
    }
  },
  plugins: [
    new HtmlWebpackPlugin({
        template: './src/index.html',
    })
  ]
});

My folder structure:

webpack.common.js
webpack.dev.js
src/
├─ index.html
├─ index.js

Tools versions:

"html-webpack-plugin": "^5.5.0"
"webpack": "^5.52.0"
"webpack-dev-server": "^4.1.0"
"webpack-merge": "^5.8.0"

QUESTION: When running webpack-dev-server --config webpack.dev.js in the root folder, I'm getting 404 error for index.html when accessing localhost:9000/index.html. Shouldn't index.html be created in memory?

I do get this in the log when starting the server:

asset bundle.js 901 KiB [emitted] (name: main)
asset index.html 5 KiB [emitted]

How not to get 404 error and access index.html that's in memory? Am I missing something?

My problem was with this line in webpack.common.js:

publicPath: "/dist/"

By removing it, it worked.