Webpack 5 dev server does not reload on file changes

I'm very new to webpack so please be indulgent but I can't figure out why it is not reloading the page when a modification is detected. With some old version of webpack just running webpack-dev-server was enough but with these latest versions I can't get there.

Here is my config :

const path = require('path')
 
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'public/scripts'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
          {
            test: /\.m?js$/,
            exclude: /node_modules/,
            use: {
              loader: 'babel-loader',
              options: {
                presets: [
                  ['@babel/preset-env']
                ]
              }
            }
          }
        ]
    },
    target: ['web', 'es5'],
    devServer: {
      contentBase: path.resolve(__dirname, 'public'),
      watchContentBase: true
    },
    devtool: 'source-map'
}

Here is my script :

"scripts": {"dev": "webpack serve --mode=development"}

versions I'm running :

"webpack": "^5.11.0",
"webpack-cli": "^4.3.0",
"webpack-dev-server": "^3.11.0"

thank you for your help