我们相信：世界是美好的，你是我也是。平行空间的世界里面，不同版本的生活也在继续...

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

苏南大叔：webpack4系列教程，如何编写html插件的模板代码？ - webpack-plugin-html-code
webpack4系列教程，如何编写html插件的模板代码？ （图1-1）

本文测试环境：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教程的链接，欢迎点击：

如果本文对您有帮助，或者节约了您的时间，欢迎打赏瓶饮料，建立下友谊关系。
本博客不欢迎：各种镜像采集行为。请尊重原创文章内容，转载请保留作者链接。

 【福利】 腾讯云最新爆款活动！1核2G云服务器首年50元！

 【源码】本文代码片段及相关软件，请点此获取更多信息

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