如何将拆分的文件注入到HtmlWebpackPlugin中？

Question

我使用optimize.splitChunks拆分了普通文件，但是我不知道如何将它们包含到html中。

我的主要webpack配置文件：

const common = merge([
  {

    entry: {
      'index': `${PATHS.source}/pages/index/index.js`,
      'blog': `${PATHS.source}/pages/blog/blog.js`
    },
    output: { 
      path: PATHS.build,
      filename: 'js/[name].js'
    },
    plugins: [
      new HtmlWebpackPlugin({
        filename: 'index.html',
        chunks: ['index'],
        template: `${PATHS.source}/pages/index/index.pug`
      }),
      new HtmlWebpackPlugin({
        filename: 'blog.html',
        chunks: ['blog''],
        template: `${PATHS.source}/pages/blog/blog.pug`
      })
    ],
  },
  {
    optimization: {
      splitChunks: {
        chunks: 'all',
        minSize: 0
      }
    }
  },
  pug
]);


module.exports = (env, argv) => {

  if (argv.mode === 'development') {
    return merge([
      common,
      devServer,
      style(true)
    ]);
  }

  if (argv.mode === 'production') {
    return merge([
      clean,
      common,
      style(false)
    ]);
  }

};

我的style.js文件：

const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const CssoWebpackPlugin = require('csso-webpack-plugin').default;

module.exports = (devMode) => {
  return {
    plugins: [
      new MiniCssExtractPlugin({
        filename: './css/[name].css'
      }),
      new CssoWebpackPlugin()
    ],
    module: {
      rules: [
        {
          test: /\.(sa|sc|c)ss$/,
          use: [
            devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
            'css-loader',
            'sass-loader',
          ],
        }
      ]
    }
  }
};

我称拆分文件为'common'，然后将'common'放在HtmlWebpackPlugin({chunks: ['index', 'common'])中。是的，它可以工作，但我想这种方式可能会有问题。您有解决这个问题的好主意吗？