webpack - 合并 htmlwebpackplugin block

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: `${file}.html`,
      template: `build/${file}.html`,
      chunks: [file.replace(/-(\w)/g, (match, c) => c.toUpperCase())]
    })
  );
})