第三节主要对应视频教程上，针对于html-webpack-plugin这个的详细讲解，对此做一下笔记。
先在webpack.config.js 声明一个变量。
var htmlWebpackPlugin = require('html-webpack-plugin');
然后就在plugins进行属性的设置 如title
plugins:[
new htmlWebpackPlugin({
filename:'index.html',
template:'index.html',//此处可以指定一个路径 如 src/temp/index.html
inject:'head',
title:'webpack is bad', // title 属性
date:new Date() //date 属性
})
]
接着就要在模板文件中使用这些属性。这种写法视频中提到的是模板文件的写法
（1）<%= %> 直接取值
（2）<% %> 运行JS代码
<title><%= htmlWebpackPlugin.options.title %></title>
or
<%= htmlWebpackPlugin.options.date %>
接下来开始对htmlWebpackPlugin 中的属性进行遍历，查看我们能够从htmlWebpackPlugin取到的信息。
<% for (var key in htmlWebpackPlugin) {%>
<%=key %>
<% } %>
最终生成 files、options 这两个结果。我们在继续对这两个Key进行遍历
<% for (var key in htmlWebpackPlugin.files) {%>
<%=key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<!-- 对遍历出来的结果进行字符串化，使用JSON.stringify()-->
<% } %>
<% for (var key in htmlWebpackPlugin.options) {%>
<%=key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
<% } %>
结果如下所示 其中，对options的遍历结果中我们已经使用了其中的inject filename 等。更多的可以去官网看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 :
<!--对options的遍历-->
template : "/Users/wuxinbo/Desktop/前端/个人练习/WebpackDemo/muke-Webpack/node_modules/html-webpack-plugin/lib/loader.js!/Users/wuxinbo/Desktop/前端/个人练习/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>
在得知这些属性后就可以进行使用，可以在模板文件中对打包好的文件进行引用。如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title><%= htmlWebpackPlugin.options.title %></title>
<!-- 直接引用chunks中的内容 -->
<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中的内容 -->
<script type="text/javascript" src="<%= htmlWebpackPlugin.files.chunks.a.entry%>"></script>
</body>
</html>
同时也需要对webpack.config.js中的 plugins的 inject属性进行设置，官网对inject描述：当inject的值为 true 或者'body' 时，所有JS源都会放置在body标签内，值为'head',就把所有JS源都放置在head标签内。如设置为false，则不对其进行定义。由于以上代码一个放进了head，一个放进了body，那么就需要设置为false.
关于pubulicPath 相当于一个占位符。当设置好参数后，使所有引用的相对路径变为绝对路径。
output:{
path:path.resolve(__dirname,'dist'),
filename:'js/[name].js',
publicPath:'https://cdn.com/'
}
网友评论