Webpack 5和开发人员服务器以及HMR的新安装程序在浏览器控制台中引发错误

Question

我更新了设置，有了新模块，我的HOT重新加载就不再工作了。

我收到以下错误消息：

index.js:548 [webpack-dev-server] Live Reloading enabled.
index.js:548 [webpack-dev-server] App hot update...
log.js:24 [HMR] Checking for updates on the server...
log.js:26 [HMR] Update failed: TypeError: Cannot read properties of undefined (reading 'forEach')
at Object.__webpack_require__.hmrC.miniCss (http://127.0.0.1:3000/main.bundle.js:151284:21)
at http://127.0.0.1:3000/main.bundle.js:151086:46
at Array.reduce (<anonymous>)
at http://127.0.0.1:3000/main.bundle.js:151082:54
module.exports @ log.js:26
(anonymous) @ dev-server.js:46
Promise.catch (async)
check @ dev-server.js:36
(anonymous) @ dev-server.js:55
emit @ events.js:153
reloadApp @ reloadApp.js:33
ok @ index.js:127
(anonymous) @ socket.js:46
client.onmessage @ WebSocketClient.js:35

我的条目：

entry: {
main: [
'webpack/hot/dev-server',
`webpack-dev-server/client?${URL}`,
`${options.SRC_DIR}styles/main.scss`,
`${options.SRC_DIR}main.js`,
]
}

我的包裹：

...
"webpack": "^5.63.0",
"webpack-dev-server": "^4.4.0",
...

我的开始脚本：

...
const compiler = webpack(webpackConfig(true, { localUrl, networkUrl }));
return new WebpackDevServer({
host: options.host,
port: options.port,
headers: {
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, PATCH, OPTIONS',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
},
static: {
directory: path.resolve(options.BUILD_DIR),
},
devMiddleware: {
stats: {
colors: true,
hash: false,
timings: false,
chunks: true,
chunkModules: false,
modules: false,
children: false,
},
},
hot: true,
client: false,
historyApiFallback: true,
open: true,
}, compiler).startCallback((err) => {
if (err) { // noinspection JSUnresolvedVariable
console.log(err);
}
});
...

有人有使用当前Webpack 5的经验吗？

以下是示例项目：https://github.com/simkea/webpack5-hmr-setup

非常感谢

Answer 1

我发现了问题：

在我的webpack配置中；chunkLoading：false"；定义这是目前人力资源管理的一个问题。

output: (DEV_MODE
? {
path: path.resolve(options.DIST_DIR),
publicPath: '',
filename: '[name].bundle.js',
sourceMapFilename: '[file].map',
// chunkLoading: false, // <------ HRM PROBLEM
} : {
path: path.resolve(options.BUILD_DIR),
publicPath: '',
filename: '[name].bundle.js',
}
),