解决webpack5使用webpack-dev-server热更新，改变内容页面无法自动更新并且报错

其实页面文件已经进行了热替换，但需要手动刷新，页面才能进行更新。当前问题只在webpack5出现，问题出在哪里？

报错问题：[HMR] Update failed: ChunkLoadError: Loading hot update chunk main failed.

网上看到一些热更新失败处理做法：

1：在webpack.config.js添加target: 'web'
2：删除.browserslistr文件
3：webpack版本降级（不推荐）
4：使用webpack serve运行
5：使用--watch监听

但以上作法在webpack下面版本使用都不能生效：

"webpack": "^5.72.0",
"webpack-cli": "^4.9.2"

optimization是webpack5新增的一个属性，并且里面可以替换之前很多插件，内部已经集成。

将以下选项更新为新版本（如果使用）：
optimization.hashedModuleIds: true→optimization.moduleIds: 'hashed'
optimization.namedChunks: true→optimization.chunkIds: 'named'
optimization.namedModules: true→optimization.moduleIds: 'named'
NamedModulesPlugin→optimization.moduleIds: 'named'
NamedChunksPlugin→optimization.chunkIds: 'named'
HashedModuleIdsPlugin→optimization.moduleIds: 'hashed'
optimization.noEmitOnErrors: false→optimization.emitOnErrors: true
optimization.occurrenceOrder: true→optimization: { chunkIds: 'total-size', moduleIds: 'size' }
optimization.splitChunks.cacheGroups.vendors→optimization.splitChunks.cacheGroups.defaultVendors
optimization.splitChunks.cacheGroups.test(module, chunks)→optimization.splitChunks.cacheGroups.test(module, { chunkGraph, moduleGraph })
Compilation.entries→Compilation.entryDependencies
serve→serve被删除以支持DevServer
Rule.query（自 v3 起已弃用）→ Rule.options/UseEntry.options

解决方法

module.exports = {
    ...
    optimization: {
        runtimeChunk: 'single'
    }
    ...
}