清除插件和重新生成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(),
    ],

 

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

 

 

  

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

上一篇:css实现鼠标悬浮图片放大


下一篇:执行webpack报错“Cannot find module 'webpack-cli/bin/config-yargs'”-之解决办法