webpack實踐（四）- html-webpack-plugin
webpack系列部落格中程式碼均在github上：https://github.com/JEmbrace/webpack-practice
《webpack實踐（一）- 先入個門》
《webpack實踐（二）- webpack配置檔案》
《webpack實踐（三）- html-webpack-plugin》
一.前言
在上一篇 《webpack實踐（三）- html-webpack-plugin》文章中，我們簡單的使用了一下html-webpack-pluin這個外掛：建立例項並傳入template選項，並且演示了外掛生成一個新模板並自動將打包後的指令碼自動引入到模板檔案中和外掛使用原有模板並將打包後的指令碼自動引入到模板檔案中這兩個功能。
那對於html-webpack-plugin這個外掛來說，除了前面演示過的template配置項之外，它還有很多可配置的選項。
接下來我們就來研究一下html-webpack-plugin這個外掛其他可選的配置項。
二.title
title配置項可用於生成html的標題，基本語法: title:{String}
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html'
})
]
};
使用webpack打包後的結果檔案dist/index.html
我們發現打包後的結果檔案並沒有生成相應的title,那實際上要想模板檔案正常顯示配置的title這裡有兩種辦法：
第一種就是不使用我們自己編寫的index.html模板，即不配置template選項，讓html-webpack-plugin幫我們生成一個模板檔案
我們將webpack.config.js中的template選項註釋掉
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
// template: './index.html'
})
]
};重新打包檢視dist/index.html 結果：
可以看到title已經成功顯示。
那第二種就是當我們需要使用我們自己的模板，即有template配置選項的時候。那麼這個時候我們就需要在模板中使用 <％= htmlWebpackPlugin.options.title％>這樣的語法去獲取title並且展示到模板中。
我們先將剛剛註釋的template放開
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html'
})
]
};
然後在修改根目錄下我們的模板檔案index.html
<html>
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>webpack實踐（四）- html-webpack-plugin</h1>
</body>
</html>
打包檢視dist/index.html結果檔案
可以看到，這次使用了我們自己的模板，並且將title成功的應用到了打包後的結果模板中。
三.filename
filename表示的是我們最終打包後的模板檔名，基本語法： filename:{String}
前面的配置中，我們沒有指定filename，生成後的模板名都是index.html，也可知當該引數預設時，生成的模板檔名預設為index.html。
接著，我們加入這個配置項
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html',
filename: 'resultIndex.html'
})
]
};
打包檢視生成的目錄和檔案
備註：本次的打包結果不會覆蓋上次的結果，因此為了看清楚本次結果，最好將上次打包後的dist目錄刪除。
可以看到打包後的結果檔案已經和fielname的配置一致。
那麼filename的值還可以是一個路徑
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html',
filename: 'template/resultIndex.html'
})
]
};
打包後的結果
四.inject
inject配置項用於指定打包後的javascript資源引入位置，基本語法： inject:{Boolean|String}。其中Boolean有兩個值可配置：true和false；String型別也有兩個值可選：‘body’和‘head’。對於Boolean型別的true值和String型別的body值，會指定將打包後的javascript資源引入位置放到body元素的底部；而false指定模板不引入javascript資源；head則指定將資源引入位置放到head元素中。
那麼接下來我們將inject的值分別配置為true、false、body和head這四個值。
1.inject:true
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html',
filename: 'template/resultIndex.html',
inject: true
})
]
};
結果檔案
dist/template/resultIndex.html
2.inject:false
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html',
filename: 'template/resultIndex.html',
inject: false
})
]
};
結果檔案
dist/template/resultIndex.html
3.inject:body
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html',
filename: 'template/resultIndex.html',
inject: 'body'
})
]
};
結果檔案
dist/template/resultIndex.html
4.inject:head
webpack.config.js
// 第一步：引入
var htmlWepackPlugin = require('html-webpack-plugin')
var path = require('path');
module.exports = {
mode: 'development',
entry: {
main: './index.js'
},
output: {
path: path.resolve(__dirname,'dist'),
filename: 'index.bundle.js'
},
// 第二步：建立html-webpack-plugin的例項，配置到plugins選項中
plugins:[
new htmlWepackPlugin({
// title配置項可用於生成html的標題
title: 'webpack實踐（四）- html-webpack-plugin',
template: './index.html',
filename: 'template/resultIndex.html',
inject: 'head'
})
]
};
結果檔案
dist/template/resultIndex.html
五.minify
minify的作用就是對打包後的html進行壓縮配置，基本語法為：minify:{Boolean|Object}
minify的預設值為Boolean型別的false值，表示不對html結果進行壓縮；
對於Object型別的，minify也有很多可選的配置項。
1.caseSensitive
是否以區分大小寫的方式處理自定義HTML標籤的屬性，預設值為fasle，表示不區分大小寫（不區分大小寫即原始檔中的包含大小寫的屬性會被轉化為小寫）。
設定minify.caseSensitive為fasle
webpack.config.js
原始檔和打包後的結果檔案對比
可以看到，當minify設定為false的時候，不管是自定義標籤的屬性，還是HTML原有的標籤屬性，都會全部轉化為小寫（這裡的結果和官方文件的說法有些出入）
設定minify.caseSensitive為true
webpack.config.js
原始檔和打包後的結果檔案對比
minify設定為true即表示區分大小寫，因此可看到原始檔中大寫的屬性在結果檔案中保持不變。
2.minifyCSS
minifyCSS表示是否壓縮html中的樣式，其中樣式包括style標籤內部的樣式和寫在元素上的樣式。其預設值為false，表示不對這些樣式做額外處理，這裡不演示值為false的配置。
webpack.config.js
原始檔和打包後的結果檔案對比
3.minifyJS
壓縮html中的JavaScript程式碼。
webpack.config.js
源模板檔案
<html>
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<h1>webpack實踐（四）- html-webpack-plugin</h1>
<script type="text/javascript">
var h1Ele = document.getElementsByTagName('h1')[0];
var innerHTML = h1Ele.innerHTML;
console.log(innerHTML);
</script>
</body>
</html>
打包後的模板檔案
<html>
<head>
<meta charset="utf-8">
<title>webpack實踐（四）- html-webpack-plugin</title>
<script type="text/javascript" src="../index.bundle.js"></script></head>
<body>
<h1>webpack實踐（四）- html-webpack-plugin</h1>
<script type="text/javascript">var h1Ele=document.getElementsByTagName("h1")[0],innerHTML=h1Ele.innerHTML;console.log(innerHTML)</script>
</body>
</html>
可以看到minifyJS對JavaScript程式碼不僅進行了空格、換行和最後一行程式碼分號的進行了刪除，同時在變數的定義也和原始碼有些差異。
4.removeComments
這個從字面意思就能看出來是刪除HTML模板中的註釋程式碼，預設值為false，表示不刪除註釋。
而且當該項配置設定為true時，僅刪除html程式碼中的註釋，不刪除style和javascript程式碼片段中的註釋。
webpack.config.js
原始檔
<html>
<head>
<meta charset="utf-8" />
<title><%= htmlWebpackPlugin.options.title %></title>
<style>
/* 寫點樣式 */
h1{
font-size: 12px;
color: #ccc;
}
</style>
</head>
<body>
<!-- 這裡是h1標籤 -->
<h1>webpack實踐（四）- html-webpack-plugin</h1>
<script type="text/javascript">
// 獲取h1元素，並列印h1元素的innerHTML
var h1Ele = document.getElementsByTagName('h1')[0];
var innerHTML = h1Ele.innerHTML;
console.log(innerHTML);
</script>
</body>
</html>
打包後的結果檔案
<html>
<head>
<meta charset="utf-8">
<title>webpack實踐（四）- html-webpack-plugin</title>
<style>
/* 寫點樣式 */
h1{
font-size: 12px;
color: #ccc;
}
</style>
<script type="text/javascript" src="../index.bundle.js"></script></head>
<body>
<h1>webpack實踐（四）- html-webpack-plugin</h1>
<script type="text/javascript">
// 獲取h1元素，並列印h1元素的innerHTML
var h1Ele = document.getElementsByTagName('h1')[0];
var innerHTML = h1Ele.innerHTML;
console.log(innerHTML);
</script>
</body>
</html>
從原始檔中可以看到，我們給html程式碼中、style和javascript程式碼中均添加了註釋，而打包後的結果檔案中只有html中的註釋被移除。
六.總結
本篇文章總結了html-webpack-plugins外掛中常用的一些可選配置項，分別為：title、filename、inject和minify。
而實際上還有一些常見的可選配置項沒有列出來，後續若能在實際需求中用到，在繼續補充。
&n