清除插件和重新生成HTML模板出现的问题

webpack安装 clean-webpack-plugin 和 html-webpack-plugin 是为了重新生成打包的bundle之后清空以前的的bundle之后创建一个新的html文件并将新的bundle插入到HTML中

但是在这个过程中出现一个问题，我创建的HTML模板中，含有id= ‘app’，但是生成的新的HTML这行代码没有了。

HTML模板：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>webpack搭建</title>
</head>

<body>
  <div id="root"></div>
</body>

</html>

webpack配置：

plugins:[
   // 清空直接打包好的bundle文件
   new CleanWebpackPlugin(),
   // 重新构建html模板
   new HtmlWebpackPlugin({
     title: 'index文件',
     filename:'index.html',
       template: './index.html'
    }) ,
 ]

新生成的HTML模板：缺少我设置的 <div id="root"></div>

解决办法：更换清除模板和创建模板的位置

    plugins:[
      // 重新构建html模板
      new HtmlWebpackPlugin({
        title: 'index文件',
        filename:'index.html',
        template: './index.html'
      }) ,
      // 清空直接打包好的bundle文件  ------ 清除模板放到下面
      new CleanWebpackPlugin(),
    ],

具体为什么会出现这个原因，我还没有了解清除。会继续追踪这个问题的。