Webpack4 multi-entry splitChunks split code, HtmlWebpackPlugin cannot inject vendor and runtime

after webpack4 multi-entry application uses splitChunks split code, HtmlWebpackPlugin cannot inject vendor.bundle and runtime.bundle
entry:

entry: {
    app: path.join(__dirname, "../src/app.js"),
    main: path.join(__dirname, "../src/main.js")
  },

HtmlWebpackPlugin configuration

new HtmlWebpackPlugin({
      chunks: ["main"],
      filename: "main.html",
      template: path.join(__dirname, "../index.html"),
      inject: true,
      minify: {
        removeComments: true
      }
    }),
    new HtmlWebpackPlugin({
      title: "app",
      chunks: ["app"],
      filename: "app.html",
      template: path.join(__dirname, "../app.html"),
      inject: true,
      minify: {
        removeComments: true
      }
    })

optimization configuration

optimization: {
    splitChunks: {
      chunks: "all"
    },
    runtimeChunk: {}
  }

after packing:

main.html main.bundlevendors~main.bundle.jsruntime~main.bundle.js

Why?

Javascript webpack html html5 front-end-engineering

Apr.11,2022

The corresponding chunkname

splitChunks: {
            chunks: 'all',
            maxInitialRequests: 5,
            cacheGroups: {
              default: false,
              vendors: {
                test: /[\\/]node_modules[\\/]/,
              },
            },
          },
runtimeChunk: {
    "name": "manifest"
}

needs to be defined in the chunks array in

HtmlWebpackPlugin .

Previous: Antd upgrade to 3.x some styles are not centered

Next: Vue component data request 404 problem