webpack打包html文件

在这里我们应该注意一下，webpack对html和对css,img的打包方式是不一样的喔，对html打包是通过插件plugin,对css.img打包时通过loader喔，我们后面会做详细的解释的。今天我们主要来看一看webpack如何对html文件进行打包
首先，既然是通过插件打包，那么我们就应该先安装插件，
1:安装插件：html-webpack-plugin -D 只在开发的时候用
2:在webpack.config.js中引入插件（这个文件是建立在主项目文件夹下面哟） ：const a=require("html-webpack-plugin") 在es6中用const来接收变量

const {resolve}=require('path')

module.exports={
 
    plugins:[
        new a()  //先new一下，默认会创建一个空的html（在打包好的那个js同一个目录下面，而且会自动引入哪个打包 好的js文件）
        //如果要自己指定打包哪个html文件
    ],
  
}

如果要自己指定打包哪个html文件

  plugins:[
  new a(
      {
          template:'./a.html',     //-------->这个文件必须指明路径
          filename:'b.html'       //将a.html打包到有打包的js文件那个目录下的b.html(并且制动引入打包的js文件)       
          minify:{
          collapseWhitespace:true    //移除空格
          removeComment:true        //删除注释
          
          
      }
      }
  )h
    ],
  

说明：关于js文件的路径问题大家一定要写对哟，我这里只是为了方便喔！

完成之后，然后再终端webpack一下，看看打包有没有成功哟？关于webpack.config.js配置文件看不懂的可以参考我的上一篇文章喔~

声明：本人大二在校学生一名，若有错误，还恳请大家指正，一定不甚感激，大家也可以评论交流，我们一起进步丫@~~~~