Hot reloading for webpack-dev-server is not working when the nested directory structure is passed as output and contentBase parameter

Question

I got the webpack-dev-server hot reloading feature working with the following webpack.config.js file.

    mode: 'development',
    watch: true,
    entry: path.join(__dirname, 'src/app.js'),
    devServer: {
        contentBase: path.join(__dirname, 'public'),
        hot: true,
        inline: true,
        historyApiFallback: true,
        watchContentBase: true,
        port: 9001
    },
    output: {
        path: path.join(__dirname, 'public'),
        filename: 'bundle.js',
    },

Index.html serves to

 <script src="./bundle.js"></script>

What i am trying to do right now is refactor the directories so that the bundle.js will fall into public/build and index.html will fall into public/dist. So i changed my webpack.config.js as following

    mode: 'development',
    watch: true,
    entry: path.join(__dirname, 'src/app.js'),
    devServer: {
        contentBase: path.join(__dirname, 'public', 'dist'),
        hot: true,
        inline: true,
        historyApiFallback: true,
        watchContentBase: true,
        port: 9001
    },
    output: {
        path: path.join(__dirname, 'public','build'),
        filename: 'bundle.js',
    },

Index.html serves to

 <script src="../build/bundle.js"></script>

But the above config does not work and i get bundle.js config not found. My express server is serving the static path as follows.

const publicPath=path.join(__dirname,'..','public')
console.log('publicpath',publicPath);
app.use(express.static(publicPath))

Any reason why the directory structure fail to work with HMR?

Attached is my directory structure.