3

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

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

image.png

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

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'
    }
    ...
}

Max迪丶先生
1.8k 声望64 粉丝