结合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())]
    })
  );
})