如何解决 ChunkLoadError: Loading hot update chunk second_app failed in webpack 5？

如何解决如何解决 ChunkLoadError: Loading hot update chunk second_app failed in webpack 5？

在设置新项目进行开发时，应用程序不会热重载。该应用程序由多个应用程序组成，位于不同的文件夹中。目前，html_nodes_prototype 文件夹中有 2 个应用程序second_app 和 src/apps。每个应用程序都包含 index.html、style.css 和 main.js，当我访问链接 http://localhost:8080/second_app/second_app.html 时，应用程序会显示，但如果我更改了 src/apps/second_app/main.js 中的某些内容。它不会热重载，我必须手动重载才能获得更改。我已经设置了一个 webpack-dev-server。控制台中的错误提示。我无法弄清楚配置文件有什么问题。

控制台错误

[HMR] Update Failed: ChunkLoadError: Loading hot update chunk second_app Failed.
(missing: http://localhost:8080/second_app.5b0047c2bf2b48c8a084.hot-update.js)
    at http://localhost:8080/second_app/second_app.bundle.js:987:26
    at new Promise (<anonymous>)
    at loadUpdateChunk (http://localhost:8080/second_app/second_app.bundle.js:982:20)
    at http://localhost:8080/second_app/second_app.bundle.js:1411:29
    at Array.forEach (<anonymous>)
    at Object.__webpack_require__.hmrC.jsonp (http://localhost:8080/second_app/second_app.bundle.js:1406:22)
    at http://localhost:8080/second_app/second_app.bundle.js:819:45
    at Array.reduce (<anonymous>)
    at http://localhost:8080/second_app/second_app.bundle.js:815:53

paths.js

const path = require("path");

module.exports = {
  // Source files
  src: path.resolve(__dirname,"../src"),// Production build files
  build: path.resolve(__dirname,"../dist"),// public path
  public: path.resolve(__dirname,"../public/"),};

webpack.dev.js

const common = require("./webpack.common");
var HtmlWebpackPlugin = require("html-webpack-plugin");
const merge = require("webpack-merge").merge;
const paths = require("./paths");

module.exports = merge(common,{
  mode: "development",output: {
    filename: "[name]/[name].bundle.js",path: paths.build,},module: {
    rules: [
      { test: /\.scss$/,use: ["style-loader","css-loader","sass-loader"] },{ test: /\.css$/,"css-loader"] },],devServer: {
    historyApiFallback: true,// contentBase: paths.build,open: true,compress: true,hot: true,port: 8080,plugins: [
    new HtmlWebpackPlugin({
      filename: "html_nodes_prototype/html_nodes_prototype.html",title: "HTML Nodes",template: "src/apps/html_nodes_prototype/index.html",chunks: ["html_nodes_prototype","vendor"],}),new HtmlWebpackPlugin({
      filename: "second_app/second_app.html",title: "Second app",template: "src/apps/second_app/index.html",chunks: ["second_app",});

webpack.common.js

const paths = require("./paths");

module.exports = {
  mode: "development",entry: {
    html_nodes_prototype: paths.src + "/apps/html_nodes_prototype/main.js",second_app: paths.src + "/apps/second_app/main.js",vendor: paths.src + "/apps/_vendor/vendor.js",module: {
    rules: [{ test: /\.m?js$/,use: ["babel-loader"] }],};

解决方法

将 runtimeChunk: 'single' 添加到 webpack.dev.js 对我有用。找到答案here

module.exports = {
    ...,optimization: {
        runtimeChunk: 'single'
    },...
}