Объединить куски htmlwebpackplugin

Question

Мне нужно спросить, как объединить несколько htmlwebpackplugin кодов и написать более элегантный код.

Мне нужно решение, которое поможет мне каждый раз дублировать эту new HtmlWebpackPlugin({//..somecode}) часть кода.

new HtmlWebpackPlugin({
            filename: "index.html",
            template: "build/index.html",
            hash: true,
            chunks: ["index"]
        }),

         new HtmlWebpackPlugin({
             filename:"footer.html",
             template:"build/footer.html",
             chunks:["footer"]
         }),
         new HtmlWebpackPlugin({
             filename:"news.html",
             template:"build/news.html",
             chunks:["news"]
         }),
         new HtmlWebpackPlugin({
               filename: "one-news.html",
               template: "build/one-news.html",
               chunks: ["oneNews"]
         }),
         new HtmlWebpackPlugin({
             filename: "project.html",
             template: "build/project.html",
             chunks: ["project"]
         }),
         new HtmlWebpackPlugin({
             filename: "about-us.html",
             template: "build/about-us.html",
             chunks: ["aboutUs"]
         }),
         new HtmlWebpackPlugin({
             filename: "contact.html",
             template: "build/contact.html",
             chunks: ["contact"]
         }),

Answer 1

попробуйте создать HtmlWebpackPlugin в цикле:

const webpackConfig = {
  mode: 'development',
  ...
};

['index', 'footer', 'one-news'].forEach((file) => {
  webpackConfig.plugins.push(
    new HtmlWebpackPlugin({
      filename: `${flie}.html`,
      template: `build/${file}.html`,
      chunks: [file.replace(/-(\w)/g, (match, c) => c.toUpperCase())]
    })
  );
})