我已经有一段时间没有使用WebPack了，我遇到了这个有趣的WebPack5样板。我下载了它并开始工作，一切似乎都完美无瑕，直到我决定将不同的html页面添加到我的项目中，所以我转到webpack.config.js文件，准备添加多个htmlwebpackplugin示例，每个示例都附带各自的javascript文件，一如往常：

new HtmlWebpackPlugin({
    filename: 'index.html',
    template: './src/index.html'
  }),

  new HtmlWebpackPlugin({
    filename: 'about.html',
    template: './src/about.html'
  }),

  new HtmlWebpackPlugin({
    filename: 'contact.html',
    template: './src/contact.html'
  }),

当时我意识到webpack的配置方式与我以前的配置方式非常不同，在阅读github上的文档时，我遇到了这个摘录<<html文件位于src/目录下，它将自动构建所有放置在src/目录下的html文件，不再需要手动配置每个模板！>>
所以我尝试添加一个随机的html文件，它可以工作，但是我注意到这个新创建的html文件是使用已经存在的scss文件进行样式设置的，所以我还假设webpack将它链接到项目中的app.js脚本。这让我有点困惑，因为在标准的网页设置中，每个html文件都有自己的css/scss和js文件。
配置如下所示：

const templateFiles = fs.readdirSync(environment.paths.source)
  .filter((file) => path.extname(file).toLowerCase() === '.html');

const htmlPluginEntries = templateFiles.map((template) => new HTMLWebpackPlugin({
  inject: true,
  hash: false,
  filename: template,
  template: path.resolve(environment.paths.source, template),
  favicon: path.resolve(environment.paths.source, 'images', 'favicon.ico'),
}));

我试图在/src目录中创建一个html文件夹，并将所有html文件移到那里，以保持项目整洁，但会破坏代码。也就是说，有人能给我解释一下这个配置的入口点是什么以及它是如何工作的吗？我在网页包文档和html网页包插件github页面中都没有找到任何有用的东西。