第三節(jié)主要對(duì)應(yīng)視頻教程上，針對(duì)于html-webpack-plugin這個(gè)的詳細(xì)講解，對(duì)此做一下筆記。
先在webpack.config.js 聲明一個(gè)變量。
var htmlWebpackPlugin = require('html-webpack-plugin');
然后就在plugins進(jìn)行屬性的設(shè)置 如title
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'index.html',//此處可以指定一個(gè)路徑 如 src/temp/index.html
inject:'head',
title:'webpack is bad', // title 屬性
date:new Date() //date 屬性
})
]
接著就要在模板文件中使用這些屬性。這種寫(xiě)法視頻中提到的是模板文件的寫(xiě)法
（1）<%= %> 直接取值
（2）<% %> 運(yùn)行JS代碼
<title><%= htmlWebpackPlugin.options.title %></title>
or
<%= htmlWebpackPlugin.options.date %>
接下來(lái)開(kāi)始對(duì)htmlWebpackPlugin 中的屬性進(jìn)行遍歷，查看我們能夠從htmlWebpackPlugin取到的信息。
<% for (var key in htmlWebpackPlugin) {%>
<%=key %>
<% } %>
最終生成 files、options 這兩個(gè)結(jié)果。我們?cè)诶^續(xù)對(duì)這兩個(gè)Key進(jìn)行遍歷
<% for (var key in htmlWebpackPlugin.files) {%>
<%=key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<!-- 對(duì)遍歷出來(lái)的結(jié)果進(jìn)行字符串化，使用JSON.stringify()-->
<% } %>
<% for (var key in htmlWebpackPlugin.options) {%>
<%=key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
<% } %>
結(jié)果如下所示 其中，對(duì)options的遍歷結(jié)果中我們已經(jīng)使用了其中的inject filename 等。更多的可以去官網(wǎng)看html-webpack-plugin options 屬性詳解
<body>
<p>Hello World</p>
<p>Hello YYY</p>
Mon Dec 11 2017 22:36:03 GMT+0800 (CST)
publicPath : ""
chunks : {"main":{"size":27,"entry":"js/main.js","hash":"f0883f49cc458b4e9f68","css":[]},"a":{"size":20,"entry":"js/a.js","hash":"b132e09a19bc030c1a4a","css":[]}}
js : ["js/main.js","js/a.js"]
css : []
manifest :
<!--對(duì)options的遍歷-->
template : "/Users/wuxinbo/Desktop/前端/個(gè)人練習(xí)/WebpackDemo/muke-Webpack/node_modules/html-webpack-plugin/lib/loader.js!/Users/wuxinbo/Desktop/前端/個(gè)人練習(xí)/WebpackDemo/muke-Webpack/index.html"
filename : "index.html"
hash : false
inject : "head"
compile : true
favicon : false
minify : false
cache : true
showErrors : true
chunks : "all"
excludeChunks : []
title : "webpack is bad"
xhtml : false
date : "2017-12-11T14:36:03.540Z"
</body>
在得知這些屬性后就可以進(jìn)行使用，可以在模板文件中對(duì)打包好的文件進(jìn)行引用。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 直接引用chunks中的內(nèi)容 -->
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.main.entry %>"></script>
</head>
<body>
<p>Hello World</p>
<p>Hello YYY</p>
<%= htmlWebpackPlugin.options.date %>
<!-- 直接引用chunks中的內(nèi)容 -->
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry%>"></script>
</body>
</html>
同時(shí)也需要對(duì)webpack.config.js中的 plugins的 inject屬性進(jìn)行設(shè)置，官網(wǎng)對(duì)inject描述：當(dāng)inject的值為 true 或者'body' 時(shí)，所有JS源都會(huì)放置在body標(biāo)簽內(nèi)，值為'head',就把所有JS源都放置在head標(biāo)簽內(nèi)。如設(shè)置為false，則不對(duì)其進(jìn)行定義。由于以上代碼一個(gè)放進(jìn)了head，一個(gè)放進(jìn)了body，那么就需要設(shè)置為false.
關(guān)于pubulicPath 相當(dāng)于一個(gè)占位符。當(dāng)設(shè)置好參數(shù)后，使所有引用的相對(duì)路徑變?yōu)榻^對(duì)路徑。
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name].js',
publicPath:'https://cdn.com/'
}
