參考文章：
1.webpack多頁應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個簡單的模板布局系統(tǒng)
2.美圖商城改版之——webpack多頁應(yīng)用環(huán)境搭建

組件
html-webpack-plugin
自動創(chuàng)建html組件
template：根據(jù)提供的模板創(chuàng)建默認支持html、ejs，其他模板引擎需要相關(guān)加載器。

坑點：如果全局部署了html加載器將不解析<%= %>

注意：
ejs文檔上，可以通過<% -include(path){option} %>來進行html嵌套。但html-webpack-plugin并不解析 -include語句，會報錯。經(jīng)過百番查找并沒有相關(guān)組件或配置方法，若有實現(xiàn)方法請告知萬分感謝！

同時html-webpack-plugin 和 ejs-loader的文檔也只是展示了<%= %>特性。而查得文章其他教程也是通過該特性進行ejs模板拼接實現(xiàn)復用的。

如何通過<%= %>進行拼接？

相關(guān)概念
<%= %>相當于模板的參數(shù)。類似卡槽的概念
html-webpack-plugin的template參數(shù)實質(zhì)只要接受html字符串即可。
所以在template入口處設(shè)置為一個輸出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的東西，為什么是用方法調(diào)用呢？

// 模板文件 test.ejs
<div>box1</div>
<div><%= name %></div>

疑問：ejs文件又不能import 其他js文件，要如何傳入?yún)?shù)呢？

解答：
ejs文件被ejs-loader處理之后會變成接受參數(shù)并輸出字符串的函數(shù)

// 打印 import test from './test.ejs' 模塊
function (obj) { // 接受一個對象參數(shù)
    obj || (obj = {});
    var __t, __p = '';
    with (obj) { // 在相應(yīng)位置傳入?yún)?shù)對象的name屬性
        __p += '<div>box1</div>\r\n<div>' + // 進行字符串拼接
        ((__t = ( name )) == null ? '' : __t) + // name參數(shù)處理
        '</div>';
    }
return __p // 拼接的模板
}

html-webpack-plugin的template人口雖然是js文件 實質(zhì)得到的是 test.ejs模塊的輸出 __p字符串。

得出html：

<div>box1</div>
<div>2232</div>

這里只是出入字符串，如果出入的是其他ejs模板，即可實現(xiàn)ejs模板的拼接。

若需要了解更多關(guān)于webpack多頁開發(fā)推薦閱讀：webpack多頁應(yīng)用架構(gòu)系列