webpack4多入口splitChunks拆分代码，HtmlWebpackPlugin无法注入 vendor和runtime

Question

webpack4多入口应用使用splitChunks拆分代码后，HtmlWebpackPlugin无法注入 vendor.bundle和runtime.bundle
入口：

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

HtmlWebpackPlugin配置

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配置

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

打包完成后：

但是生成的 main.html 仅仅注入了 main.bundle，没有vendors~main.bundle.js和runtime~main.bundle.js

为什么？？？？？？

Answer 1

HtmlWebpackPlugin中的chunks数组中需要定义对应的chunkname

Answer 2

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