Конфликт: несколько ресурсов отправляют в одно и то же имя файла index.html

Question

Я создал несколько страниц javascript и html для навигации с помощью веб-пакета.Я использую HtmlWebpackPlugin, реализующий несколько страниц для веб-пакета.Пожалуйста, извините за краткость, поскольку я новичок в разработке веб-пакетов.

Вот моя конфигурация веб-пакетов:

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']
  }
),

Вот моя структура проекта для разбивки на страницы: