苏南大叔说到,在webpack中最基础的是处理.js的,在上一篇文章中,又引入了html模板插件的概念。心细的读者可能会发现了,在webpack.config.js中,使用html-webpack-plugin的时候,传递了title参数。那么这个参数在模板里面是怎么接收的呢?

苏南大叔:webpack4系列教程,如何编写html插件的模板代码? - webpack-plugin-html-code
webpack4系列教程,如何编写html插件的模板代码? (图1-1)

本文测试环境:macnode@14.2.0npm@6.14.4webpack@4.43.0html-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教程的链接,欢迎点击:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留作者链接。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   webpack

本站的忠实读者小伙伴,正在阅读下面这些文章: