其實頁面文件已經進行了熱替換，但需要手動刷新，頁面才能進行更新。當前問題只在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'
    }
    ...
}