Webpack 5.22 上 html-webpack-plugin5.1.0 和 html-loader 的碰撞

直接说正题，webpack上html-loader和html-webpack-plugin冲突

错误代码:

html-webpack-plugin插件配置

plugins: [
  // html-webpack-plugin：默认会创建一个空的html文件，自动引入打包输出的所有资源（JS/CSS）
  // 需要有结构的HTML文件可以加一个template
  new HtmlWebpackPlugin({
    // 复制这个./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
    template: './src/index.ejs',
  }),
],

html-loader配置

{
  test: /\.html$/,
  // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
  loader: 'html-loader',
},

报错信息:

第一反应是引入图片的路径错误，排查之后发现并不是，然后想着是不是html-webpack-plugin插件或者html-loader配置错误，排查之后也不是，然后开始再CSDN上搜索，然后找到了两个大佬的博客，关于webpack中html-loader和html-webpack-plugin的使用冲突问题解决，以及Webpack5 踩坑之（html-webpack-plugin），特别是第二个大佬，把所有问题都剖析清楚了，最后跟着第二个大佬，到Github上找到了最终官方的解决方案，如下：

简单来说就是把

    new HtmlWebpackPlugin({
      // 复制这个./src/index.html文件，并自动引入打包输出的所有资源（JS/CSS）
      template: './src/index.html',
    }),

中的template: './src/index.html',改为template: './src/index.ejs',并将当初的src\index.html改为src\index.ejs