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

Я получил функцию горячей перезагрузки 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>

Что я пытаюсь сделать прямо сейчас, так это реорганизовать каталоги, чтобы bundle.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>

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

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

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

Во вложении моя структура каталогов.