webpack4系列教程,如何编写html插件的模板代码?
发布于 作者:苏南大叔 来源:程序如此灵动~![](/usr/themes/panda/assets/img/icon/ok.png)
苏南大叔说到,在webpack
中最基础的是处理.js
的,在上一篇文章中,又引入了html
模板插件的概念。心细的读者可能会发现了,在webpack.config.js
中,使用html-webpack-plugin
的时候,传递了title
参数。那么这个参数在模板里面是怎么接收的呢?
本文测试环境:mac
、node@14.2.0
、npm@6.14.4
、webpack@4.43.0
、html-webpack-plugin@4.3.0
。本文有前置文章,正确理解本文内容,请先查看:
传递参数
在webpack.config.js
配置文件中,可以给html-webpack-plugin
传递参数。例如,在范例里面的title
。
new HtmlWebpackPlugin({
template:"./html/index.html",
title: 'title参数',
diy:'自定义参数',
chunks: ['app', 'main']
})
接收参数
在模板./html/index.html
中,是这样接受title
参数的。
<title><%= htmlWebpackPlugin.options.title %></title>
<body><%= htmlWebpackPlugin.options.diy %></body>
从上面的写法htmlWebpackPlugin.options.
可以知道:任何名称的参数都可以通过webpack.config.js
进行传递。在html
模板里面就是options.
。所以,title
这个字符串,并不是固定值,大家可以随便取名并使用。
下面是更多的例子:
<% for (var key in htmlWebpackPlugin.files) { %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key])%>
<% } %>
相关链接
总结
这些html
模板,自带一定的简单编程能力。当然,如果你把他们处理为更多的模板类型的时候,他们就会变得更加强大。比如常见的模板引擎:jade
,handlebars
,都是可以配置支持的。
不过,苏南大叔觉得可能是把简单问题给复杂化了。所以,近期的文章并不会对他们进行阐述。还是就简简单单的描述webpack@4
系列的使用问题,更好一些。
下面有一个webpack@4
教程的链接,欢迎点击:
![](/usr/themes/panda/assets/img/icon/end.gif)
![](/usr/themes/panda/assets/img/icon/ok.png)
![](/usr/themes/panda/assets/img/icon/stop.png)