Горячая перезагрузка для webpack-dev-server не работает, когда вложенная структура каталогов передается как выходные данные и параметр contentBase

Question

Я получил функцию горячей перезагрузки webpack-dev-server, работающую со следующим файлом webpack.config. js.

    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 служит для

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

То, что я сейчас пытаюсь сделать, - это рефакторинг каталогов так, чтобы пакет. js попадал в public / build и index. html попадал в public / dist. Поэтому я изменил свой webpack.config. js следующим образом

    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 служит для

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

Но приведенная выше конфигурация не работает, и я получаю связку. js конфиг не найден. Мой express сервер обслуживает путь stati c следующим образом.

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

Любая причина, по которой структура каталогов не работает с HMR?

Прилагается моя структура каталогов.