其实页面文件已经进行了热替换,但需要手动刷新,页面才能进行更新。当前问题只在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'
}
...
}
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。