webpack配置html模板配置

npm i html-webpack-plugin -D 处理html文档
npm i clean-webpack-plugin -D 删除打包文件中之前的文件

html-webpack-plugin
将js css自动是生成css,js 引用到打包生成的html文件中
可以压缩html文件
引用自定义模板

在webpack.config.js中

 const HtmlWebpackPlugin = require('html-webpack-plugin')
 const CleanWebpackPlugin = require('html-webpack-plugin')




 plugins:[
        new HtmlWebpackPlugin({
            filename:'index.html',  //打包后文件的名字
            template:'./src/template.html',//   模板文件的名字
            // inject:false,   //是否将打包的css js文件注入到html中
            // minify:{
            //     collapseWhitespace:true,    //压缩打包后的html代码
                  removeComments: true, // 移除HTML中的注释
       			 collapseWhitespace: true, // 删除空白符与换行符
      			  minifyCSS: true// 压缩内联css
            // }
        }),
        new CleanWebpackPlugin( ) 启用  覆盖原文件_
    ]

使用 html-webpack-plugin 配置多个页面

   entry:{   					//入口文件
        a:'./src/a.js',    		//a属性可以是任何值 但需和chunks搭配
        b:'./src/b.js'
    },

 plugins:[
        new HtmlWebpackPlugin({
            filename:'a.html',  						//打包后文件的名字
            template:'./src/template.html',		//   模板文件的名字
            inject:false,									//是否将打包的css js文件注入到html中
            chunks:['a'],									// 与入口文件属性搭配			配置各自的文件路径 
            title:'我是a.html的标题',
       
        }),
        new HtmlWebpackPlugin({
            filename:'b.html',  //打包后文件的名字
            template:'./src/template.html',//   模板文件的名字
            inject:false,
            chunks:['b'],
            title:'我是b.html的标题'
        })

    ]