冲突：多个资产发出相同的文件名index.html

Question

我创建了多个javascript和html页面以使用webpack进行导航。我正在使用HtmlWebpackPlugin实现webpack的多个页面。请原谅我，因为我是webpack开发的新手。

这是我的webpack配置：

module.exports = {
  entry: {
    index: './app/src/producer/index.js',
    process: './app/src/process/process.js',
    results: './app/src/results/results.js'
  },
  mode: 'production',
  output: {
    path: buildPath,
    filename: '[name].[hash:20].js'
  },

  plugins: [
    new CleanWebpackPlugin(),

    new HtmlWebpackPlugin({ 
        filename: 'index.html',
        template: 'app/src/producer/index.html',
        inject: 'body',
        chunks: ['index']
      }
    ),

    new HtmlWebpackPlugin({ 
      filename: 'process.html',
      template: 'app/src/process/index.html',
      inject: 'body',
      chunks: ['process']
    }
  ),

  new HtmlWebpackPlugin({ 
    filename: 'results.html',
    template: 'app/src/results/index.html',
    inject: 'body',
    chunks: ['results']
  }
),

这是我的分页项目结构：