webpack配置html模板配置
npm i html-webpack-plugin -D 处理html⽂档
npm i clean-webpack-plugin -D 删除打包⽂件中之前的⽂件
html-webpack-plugin
将js css⾃动是⽣成css,js 引⽤到打包⽣成的html⽂件中
可以压缩html⽂件
引⽤⾃定义模板
在fig.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',  //  模板⽂件的名字
webpack打包流程 面试
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的标题'
})
]

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。