Webpack-dev-server doesn't work after upgraded its version

I was using webpack-dev-server of version ^3.11.2 and I migrated the version to the latest ^4.7.4. Then as usual I tried to run the dev server (e.g. webpack serve --config ./webpack.config.dev.js --port 8080") but the localhost page doesn't seem to work well and doesn't host as it did before the version upgrade.

Here the below is the devServer part of the webpack config file when I used in the old version ^3.11.2.

devServer: {
    contentBase: path.join(__dirname, "public"),
    port: 3000,
    publicPath: "/dist/", 
    writeToDisk: true
},

The below is the config now I'm trying to working on with the latest webpack-devserver, but it doesn't work as well for some reason.

devServer: {
    port: 3000,
    static: {
    directory: path.join(__dirname, 'public'),
    publicPath: '/dist/',
    },
    devMiddleware: {
    writeToDisk: true,
    },
},

The directory structure is like:

./dist
./dist/bundle.js
./public
./public/index.html 
./src 
./src/index.js
./webpack.config.dev.js

Thanks.