Webpack 5和Dev-Server的新设置和HMR在Browser-Console中抛出错误

Question

我更新了我的设置，随着新模块的出现，我的热重载不再起作用。

我得到以下错误消息：

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',
            }
    ),