javascript - 冲突：多个资产发射到相同的文件名 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']
  }
),

这是我的分页项目结构：

标签： javascriptwebpack