Javascript 如何解决ChunkLoadError:在网页包5中加载热更新chunk second_应用程序失败？

在为开发设置新项目时，应用程序不是热重新加载。该应用程序由多个应用程序组成，分别位于其不同的文件夹中。目前，在

src/apps

文件夹中有两个应用程序

html\u节点\u原型

和

second\u应用程序

。当我访问链接时，每个应用程序由

index.html

、

style.css

和

main.js

组成http://localhost:8080/second_app/second_app.html，应用程序会显示，但如果我在

src/apps/second\u app/main.js中更改了某些内容，则会显示。它不是热重新加载，我必须手动重新加载以获得更改。我已经设置了一个网页包开发服务器。控制台中的错误提示。我无法找出配置文件的错误

控制台中出现错误

[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

webpack.dev.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/"),
};

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$/, use: ["style-loader", "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",
      hot: true,
      template: "src/apps/second_app/index.html",
      chunks: ["second_app", "vendor"],
    }),
  ],
});

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"] }],
  },
};

webpack.common.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/"),
};

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$/, use: ["style-loader", "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",
      hot: true,
      template: "src/apps/second_app/index.html",
      chunks: ["second_app", "vendor"],
    }),
  ],
});

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"] }],
  },
};

在webpack.dev.js中添加
runtimeChunk:'single'
，对我来说很有用。找到了答案