参考文章：
1.webpack多页应用架构系列（十三）：构建一个简单的模板布局系统
2.美图商城改版之——webpack多页应用环境搭建
组件
html-webpack-plugin
自动创建html组件
template：根据提供的模板创建默认支持html、ejs，其他模板引擎需要相关加载器。
坑点：如果全局部署了html加载器将不解析<%= %>
注意：
ejs文档上，可以通过<% -include(path){option} %>来进行html嵌套。但html-webpack-plugin并不解析 -include语句，会报错。经过百番查找并没有相关组件或配置方法，若有实现方法请告知万分感谢！
同时html-webpack-plugin 和 ejs-loader的文档也只是展示了<%= %>特性。而查得文章其他教程也是通过该特性进行ejs模板拼接实现复用的。
如何通过<%= %>进行拼接？
相关概念
<%= %>相当于模板的参数。类似卡槽的概念
html-webpack-plugin的template参数实质只要接受html字符串即可。
所以在template入口处设置为一个输出html字符串的js文件。
简单演示：
我的入口：template: path.resolve(paths.pagesDir, page+'/render.js'), 路径拼接有点长请忽视，只是用来找到render.js文件就对了。
// 入口文件render.js
import test from './test.ejs'; //引入模块
module.exports = test({name: '2232'})
疑问：引入的test.ejs 看起来像html的东西，为什么是用方法调用呢？
// 模板文件 test.ejs
<div>box1</div>
<div><%= name %></div>
疑问：ejs文件又不能import 其他js文件，要如何传入参数呢？
解答：
ejs文件被ejs-loader处理之后会变成接受参数并输出字符串的函数
// 打印 import test from './test.ejs' 模块
function (obj) { // 接受一个对象参数
obj || (obj = {});
var __t, __p = '';
with (obj) { // 在相应位置传入参数对象的name属性
__p += '<div>box1</div>\r\n<div>' + // 进行字符串拼接
((__t = ( name )) == null ? '' : __t) + // name参数处理
'</div>';
}
return __p // 拼接的模板
}
html-webpack-plugin的template人口虽然是js文件 实质得到的是 test.ejs模块的输出 __p字符串。
得出html：
<div>box1</div>
<div>2232</div>
这里只是出入字符串，如果出入的是其他ejs模板，即可实现ejs模板的拼接。
若需要了解更多关于webpack多页开发推荐阅读：webpack多页应用架构系列
网友评论