Javascript 网页包，html网页包插件，错误：子编译失败

我的网页包配置有问题。在实现html网页包插件后，我遇到了一个错误，从生成的

index.html

中有整个错误堆栈

错误堆栈： Html网页包插件： Error: Child compilation failed: Conflict: Multiple assets emit to the same filename index.html: Error: Conflict: Multiple assets emit to the same filename index.html

• compiler.js:76 [Pre-build]/[html-webpack-plugin]/lib/compiler.js:76:16

• Compiler.js:291 Compiler. [Pre-build]/[webpack]/lib/Compiler.js:291:10

• Compiler.js:494 [Pre-build]/[webpack]/lib/Compiler.js:494:13

• Tapable.js:138 next [Pre-build]/[tapable]/lib/Tapable.js:138:11

• CachePlugin.js:62 Compiler. [Pre-build]/[webpack]/lib/CachePlugin.js:62:5

• Tapable.js:142 Compiler.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:142:13

• Compiler.js:491 [Pre-build]/[webpack]/lib/Compiler.js:491:10

• Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

• Compilation.js:645 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:645:19

• Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

• Compilation.js:636 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:636:11

• Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

• Compilation.js:631 self.applyPluginsAsync.err [Pre-build]/[webpack]/lib/Compilation.js:631:10

• Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

• Compilation.js:627 sealPart2 [Pre-build]/[webpack]/lib/Compilation.js:627:9

• Tapable.js:131 Compilation.applyPluginsAsyncSeries [Pre-build]/[tapable]/lib/Tapable.js:131:46

• Compilation.js:575 Compilation.seal [Pre-build]/[webpack]/lib/Compilation.js:575:8

• Compiler.js:488 [Pre-build]/[webpack]/lib/Compiler.js:488:16

• Tapable.js:225 [Pre-build]/[tapable]/lib/Tapable.js:225:11

• Compilation.js:477 _addModuleChain [Pre-build]/[webpack]/lib/Compilation.js:477:11

• Compilation.js:448 processModuleDependencies.err [Pre-build]/[webpack]/lib/Compilation.js:448:13

• next_tick.js:73 _combinedTickCallback internal/process/next_tick.js:73:7

• next_tick.js:104 process._tickCallback internal/process/next_tick.js:104:9 我找不到那个错误的任何来源，也许我有点累了，但我想完成它，所以我希望你们的帮助

  ---

  也许我应该使用一些

  原始加载程序
  来加载
  .html
  （？），这让我不高兴。
  问题确实是
  文件加载程序的问题，因为它只是简单地复制文件。当
  html网页包插件
  尝试写入
  index.html
  时，它已经被
  文件加载器
  写入，因此导致冲突
  
  有几种方法可以解决这个问题，具体取决于您的需求
  
  您可以将其用于HTML，但如果您希望导入的HTML只是简单地复制，那么这不是正确的选择。要明确的是，我所说的导入HTML并不是指
  HTML网页包插件所使用的模板
  
  如果要继续对其他HTML文件使用
  文件加载器
  ，可以排除
  index.HTML
  以便
  HTML网页包插件
  返回其默认加载器
  require.resolve
  的工作原理类似于
  require
  ，但提供模块的完整路径，而不是其内容
  
  {
      test: /\.html$/,
      exclude: [/node_modules/, require.resolve('./index.html')],
      use: {
          loader: 'file-loader',
          query: {
              name: '[name].[ext]'
          },
      },
  },
  
  当没有加载程序与模板匹配时，
  html网页包插件
  使用。如果
  .html
  文件不需要任何加载程序，可以完全删除该规则，这样就可以正常工作。这是不太可能的，否则您首先就不会有
  .html
  规则，但这也意味着您可以使用
  .ejs
  扩展来不应用
  .html
  规则，因为所有html都是有效的。您可以将
  index.html
  重命名为
  index.ejs
  ，并相应地更改插件配置：
  
  new HtmlWebpackPlugin({
      template: 'index.ejs',
      minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
  })
  
  伟大的回答和解释！我真的很感谢你的帖子，我决定继续使用
  html网页插件
  ，并删除
  html加载程序
  ，只要我只做一个站点。真的谢谢你，现在事情对我来说清楚多了
  new HtmlWebpackPlugin({
      template: 'index.ejs',
      minify: {
          removeComments: true,
          collapseWhitespace: true,
          removeAttributeQuotes: true
      },
      chunksSortMode: 'dependency'
  })