Why __webpack_hmr route is 404 when using webpack-dev-server?

I have the following webpack configuration and start my dev server with webpack-dev-server --hot. However hmr does not seem to work. In browser console I see GET http://localhost:8080/__webpack_hmr 404 (Not Found).

Spent already several hours going through the docs and various articles. It seems that I am missing something crucial here.

Using webpack 4.46.0, webpack-dev-server 3.11.2 and webpack-cli 3.3.12.

const path = require('path')
const { isDev, rules, plugins, resolve } = require('./webpack.shared')

const contentBase = path.resolve(__dirname, 'public')
const publicPath = '.webpack'

module.exports = {
  mode: isDev ? 'development' : 'production',
  devtool: isDev ? 'eval-source-map' : undefined,
  entry: path.resolve(__dirname, 'src', 'browser', 'renderer.tsx'),
  output: {
    path: path.resolve(contentBase, publicPath),
    filename: 'bundle.js',
  },
  module: {
    rules,
  },
  plugins,
  resolve,
  devServer: {
    contentBase,
    publicPath: '/' + publicPath,
    hot: true,
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        pathRewrite: { '^/api': '' },
        secure: false,
        changeOrigin: true,
      },
      '/lp': {
        target: 'https://lp.example.com',
        pathRewrite: { '^/lp': '' },
        secure: false,
        changeOrigin: true,
      },
    },
  },
}