html-webpack-plugin 是什么？
html-webpack-plugin是webpack（？？不知道請(qǐng)自行百度哦）的一個(gè)自動(dòng)生成html文件的插件
為什么要用它？
沒(méi)用 html-webpack-plugin插件之前，我們用一個(gè)js文件，需要經(jīng)過(guò)webpack打包之后，手動(dòng)創(chuàng)建一個(gè)html文件，并在html文件中用script標(biāo)簽引用我們之前經(jīng)過(guò)webpack打包好的js文件。
用了這個(gè)插件之后，插件會(huì)自動(dòng)生成html文件并將打包好的js插入文件
安裝
npm install html-webpack-plugin --save
我的 webpack.config.js文件
var webpack=require('webpack');
//引用插件
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
app:'./src/app.js',
pay:'./src/pay/app.js'
},
output: {
path: './build',
filename: 'js/[name].js'
}
}
HtmlwebpackPlugin配置項(xiàng)之生成html文件
plugins:[
new HtmlwebpackPlugin(),
]
- 說(shuō)明： 當(dāng)直接如上面調(diào)用，則直接會(huì)生成一個(gè)名為 index.html的文件在 webpack.config.js文件中定義的 output.path這個(gè)目錄下，并且會(huì)直接吧 entry 中定義的入口文件插入html中，生成代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webpack App</title>
</head>
<body>
<script type="text/javascript" src="js/pay.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
HtmlwebpackPlugin之生成指定標(biāo)題和名字的html文件
plugins:[
new HtmlwebpackPlugin({
title: 'Hello world',
filename: 'my_diy.html',
})
]
- 說(shuō)明： 當(dāng)直接如上面調(diào)用，則直接會(huì)生成一個(gè)名為 my_diy.html的文件在 webpack.config.js文件中定義的 output.path這個(gè)目錄下，并且會(huì)直接吧 entry 中定義的入口文件插入my_diy.html中，生成代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello world</title>
</head>
<body>
<script type="text/javascript" src="js/pay.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
HtmlwebpackPlugin之 只插入必要的js片段（chunk 即 entry 中定義的入口文件）到生成的HTML文件
plugins:[
new HtmlwebpackPlugin({
chunks:["app"],
title: 'app頁(yè)面',
filename: 'app.html'
})
]
- 說(shuō)明： 當(dāng)指定了chunks屬性，webpack會(huì)按照這個(gè)屬性定義的數(shù)組，將數(shù)組中所有片段完成打包，并用script標(biāo)簽將打包的js插入到生成的頁(yè)面中，沒(méi)有在數(shù)組中的片段，則不插入頁(yè)面，生成代碼如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>app頁(yè)面</title>
</head>
<body>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>
HtmlwebpackPlugin之生成多個(gè)HTML文件
plugins:[
new HtmlwebpackPlugin({
chunks:["app"],
title: 'app頁(yè)面',
filename: 'app.html'
}),
new HtmlwebpackPlugin({
chunks:["pay"],
title: 'pay頁(yè)面',
filename: 'pay.html'
})
]
HtmlwebpackPlugin配置項(xiàng)之根據(jù)已有的html文件生成html文件
有時(shí)候，插件自動(dòng)生成的html文件，并不是我們需要結(jié)構(gòu)，我們需要給它指定一個(gè)模板，讓插件根據(jù)我們給的模板生成html
plugins:[
new HtmlwebpackPlugin({
chunks:["app"],
title: 'Hello babel-loader',
filename: 'index.html',
template: './src/index.html',//html文件的模板
}),
HtmlwebpackPlugin之其他配置項(xiàng)說(shuō)明
- inject 值{true | 'head' | 'body' | false} 注入所有的資源到特定的 template 或者 templateContent 中，如果設(shè)置為 true 或者 body，所有的 javascript 資源將被放置到 body 元素的底部，'head' 將放置到 head 元素中。
plugins:[
new HtmlwebpackPlugin({
chunks:["app"],
title: 'app頁(yè)面',
filename: 'app.html',
inject: true,
})
]
- favicon 添加特定的 favicon 路徑到輸出的 HTML 文件中
- hash 值{布爾型} 是否為靜態(tài)資源生成hash值 一般設(shè)置為允許（true）
//生成hash值是非常必要的，我們js都是有緩存的，你懂的
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>app頁(yè)面</title>
</head>
<body>
<script type="text/javascript" src="js/app.js?4a470a27ba76ea67249b"></script>
</body>
</html>
- minify 值對(duì)象類型 壓縮html文件
plugins:[
new HtmlwebpackPlugin({
chunks:["app"],
title: 'app頁(yè)面',
filename: 'app.html',
inject: true,
minify:{ //壓縮HTML文件
removeComments:true, //移除HTML中的注釋
collapseWhitespace:true //刪除空白符與換行符
}
}),
