摘要：原文地址如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里前言上文多頁(yè)應(yīng)用架構(gòu)系列十二利用生成普通網(wǎng)頁(yè)頁(yè)面模板我們基本上已經(jīng)搞清楚如何利用來(lái)生成普通網(wǎng)頁(yè)頁(yè)面模板，本文將以我的腳手架項(xiàng)目介紹如何在這基礎(chǔ)上搭建一套簡(jiǎn)單的模板布局系統(tǒng)。

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007159115
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang

上文《webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板》我們基本上已經(jīng)搞清楚如何利用html-webpack-plugin來(lái)生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板，本文將以我的腳手架項(xiàng)目Array-Huang/webpack-seed介紹如何在這基礎(chǔ)上搭建一套簡(jiǎn)單的模板布局系統(tǒng)。

上文我們說(shuō)到，利用模板引擎&模板文件，我們可以控制HTML的內(nèi)容，但這種控制總體來(lái)說(shuō)還是比較有限的，而且很大程度受限于你對(duì)該模板引擎的熟悉程度，那么，有沒(méi)有更簡(jiǎn)單的方法呢？

有！我們可以就用我們最熟悉的js來(lái)肆意組裝、拼接出我們想要的HTML！

首先來(lái)看一個(gè)上文提到的例子：

var HtmlWebpackPlugin = require("html-webpack-plugin");
var webpackConfig = {
  entry: "index.js",
  output: {
    path: "dist",
    filename: "index_bundle.js"
  },
  plugins: [new HtmlWebpackPlugin(
    title: "按照ejs模板生成出來(lái)的頁(yè)面",
    filename: "index.html",
    template: "index.ejs",
  )],
};

這個(gè)例子是給html-webpack-plugin指定一個(gè)名為index.ejs的ejs模板文件，來(lái)達(dá)到生成HTML頁(yè)面文件的目的，從html-webpack-plugin的文檔我們可以看出，除了默認(rèn)支持的ejs外，其實(shí)還可以使用其它模板引擎（例如jade、handlebars、underscore）,支持的方法是在webpack配置文件中配置好相應(yīng)的loader即可。

因此，我們可以推理出，html-webpack-plugin其實(shí)并不關(guān)心你用的是什么模板引擎，只要你的模板最后export出來(lái)的是一份完整的HTML代碼（字符串）就可以了。于是，我做了一個(gè)大膽的嘗試，給html-webpack-plugin的template參數(shù)指定一個(gè)js文件，然后在此js文件末尾export出一份完整的HTML代碼來(lái)。這個(gè)js文件我命名為“模板接口”（上面架構(gòu)圖上有標(biāo)識(shí)），意思是，不是光靠這一個(gè)js文件就能形成一份模板，“接口”之后是一套完整的模板布局體系。下面以webpack-seed項(xiàng)目里的src/pages/alert/index（“消息通知”頁(yè)）作為例子進(jìn)行說(shuō)明。

先來(lái)看看我是如何給html-webpack-plugin指定一個(gè)js作為模板的：

/* 
  這是用來(lái)生成alert/index頁(yè)的HtmlWebpackPlugin配置
  在原項(xiàng)目中是循環(huán)批量new HtmlWebpackPlugin的，此處為了更容易理解，特別針對(duì)alert/index頁(yè)做了修改
*/
new HtmlWebpackPlugin({
    filename: `alert/index/page.html`,
    template: path.resolve(dirVars.pagesDir, `./alert/index/html.js`), // 指定為一個(gè)js文件而非普通的模板文件
    chunks: ["alert/index", "commons"], // 自動(dòng)加載上index/login的入口文件以及公共chunk
    hash: true, // 為靜態(tài)資源生成hash值
    xhtml: true,  // 需要符合x(chóng)html的標(biāo)準(zhǔn)
});

下面來(lái)介紹這個(gè)作為模板接口的js文件：

/* 選自webpack-seed/pages/alert/index/html.js  */
const content = require("./content.ejs");  // 調(diào)取存放本頁(yè)面實(shí)際內(nèi)容的模板文件
const layout = require("layout");  // 調(diào)用管理后臺(tái)內(nèi)部所使用的布局方案，我在webpack配置里定義其別名為"layout"
const pageTitle = "消息通知"; // 頁(yè)面名稱(chēng)

// 給layout傳入“頁(yè)面名稱(chēng)”這一參數(shù)（當(dāng)然有需要的話也可以傳入其它參數(shù)），同時(shí)也傳入頁(yè)面實(shí)際內(nèi)容的HTML字符串。content({ pageTitle })的意思就是把pageTitle作為模板變量傳給ejs模板引擎并返回最終生成的HTML字符串。
module.exports = layout.init({ pageTitle }).run(content({ pageTitle })); 

從代碼里我們可以看出，模板接口的作用實(shí)際上就是整理好當(dāng)前頁(yè)面獨(dú)有的內(nèi)容，然后交與layout作進(jìn)一步的渲染；另一方面，模板接口直接把layout最終返回的結(jié)果（完整的HTML文檔）給export出來(lái)，供html-webpack-plugin生成HTML文件使用。

  

    
<%= pageTitle %>
    
  

接著我們來(lái)看看整套模板布局系統(tǒng)的核心——layout。layout的主要功能就是接收各個(gè)頁(yè)面獨(dú)有的參數(shù)（比如說(shuō)頁(yè)面名稱(chēng)），并將這些參數(shù)傳入各個(gè)公共組件生成各組件的HTML，然后根據(jù)layout本身的模板文件將各組件的HTML以及頁(yè)面實(shí)際內(nèi)容的HTML拼接在一起，最終形成一個(gè)完整的HTML頁(yè)面文檔。

/* 選自webpack-seed/src/public-resource/layout/layout/html.js */
const config = require("configModule");
const noJquery = require("withoutJqueryModule");
const layout = require("./html.ejs"); // 整個(gè)頁(yè)面布局的模板文件，主要是用來(lái)統(tǒng)籌各個(gè)公共組件的結(jié)構(gòu)
const header = require("../../components/header/html.ejs"); // 頁(yè)頭的模板
const footer = require("../../components/footer/html.ejs"); // 頁(yè)腳的模板
const topNav = require("../../components/top-nav/html.ejs"); // 頂部欄的模板
const sideMenu = require("../../components/side-menu/html.ejs"); // 側(cè)邊欄的模板
const dirsConfig = config.DIRS;

/* 整理渲染公共部分所用到的模板變量 */
const pf = {
  pageTitle: "",
  constructInsideUrl: noJquery.constructInsideUrl,
};

const moduleExports = {
  /* 處理各個(gè)頁(yè)面?zhèn)魅攵中枰诠矃^(qū)域用到的參數(shù) */
  init({ pageTitle }) {
    pf.pageTitle = pageTitle; // 比如說(shuō)頁(yè)面名稱(chēng)，會(huì)在
   
  

  
  
  


  

頁(yè)頭組件控制的范圍基本上就是整個(gè)以及的頭部。

不要小看這的頭部，由于webpack在使用extract-text-webpack-plugin生成CSS文件并自動(dòng)加載時(shí)，會(huì)把放在的最后，而眾所周知，實(shí)現(xiàn)IE8下Media Queries特性的respond.js是需要放在css后面來(lái)加載的，因此，我們就只能把respond.js放到的頭部來(lái)加載了。

由于我的腳手架項(xiàng)目還是比較簡(jiǎn)單的，所以這些公共組件的HTML都是直接根據(jù)模板文件來(lái)輸出的；如果組件本身要處理的邏輯比較多，可以使用跟模板接口一樣的思路，利用js文件來(lái)拼接。

至于組件本身行為的邏輯(js)，可以一并放到各組件的目錄里，在公共chunk里調(diào)用便是了。本文實(shí)際上只關(guān)注于如何生成HTML，這里提到這個(gè)只是提示一下組件的文件目錄結(jié)構(gòu)。

這里稍微再解釋一下BUILD_FILE.js.*和BUILD_FILE.dll.*是什么，這些其實(shí)都是沒(méi)有用webpack打包起來(lái)的js/css，我用file-loader把這些文件從src目錄搬到build目錄了，這里模板變量輸出的都是搬運(yùn)后的路徑，具體請(qǐng)看《webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包？》。啟動(dòng)搬運(yùn)的代碼放在webpack-seed/src/public-resource/config/build-file.config.js。

有了這套模板布局系統(tǒng)，我們就可以輕松地生成具有相同布局的多個(gè)靜態(tài)頁(yè)面了，“如何管理頁(yè)面布局公共部分”這一多頁(yè)應(yīng)用的痛點(diǎn)也就順利解決了。

諸位看本系列文章，搭配我在Github上的腳手架項(xiàng)目食用更佳哦（笑）：Array-Huang/webpack-seed（https://github.com/Array-Huang/webpack-seed）。

webpack多頁(yè)應(yīng)用架構(gòu)系列（一）：一步一步解決架構(gòu)痛點(diǎn)：https://segmentfault.com/a/1190000006843916

webpack多頁(yè)應(yīng)用架構(gòu)系列（二）：webpack配置常用部分有哪些？:https://segmentfault.com/a/1190000006863968

webpack多頁(yè)應(yīng)用架構(gòu)系列（三）：怎么打包公共代碼才能避免重復(fù)？：https://segmentfault.com/a/1190000006871991

webpack多頁(yè)應(yīng)用架構(gòu)系列（四）：老式j(luò)Query插件還不能丟，怎么兼容？:https://segmentfault.com/a/1190000006887523

webpack多頁(yè)應(yīng)用架構(gòu)系列（五）：聽(tīng)說(shuō)webpack連less/css也能打包？:https://segmentfault.com/a/1190000006897458

webpack多頁(yè)應(yīng)用架構(gòu)系列（六）：聽(tīng)說(shuō)webpack連圖片和字體也能打包？:https://segmentfault.com/a/1190000006907701

webpack多頁(yè)應(yīng)用架構(gòu)系列（七）：開(kāi)發(fā)環(huán)境、生產(chǎn)環(huán)境傻傻分不清楚？:https://segmentfault.com/a/1190000006952432

webpack多頁(yè)應(yīng)用架構(gòu)系列（八）：教練我要寫(xiě)ES6！webpack怎么整合Babel？:https://segmentfault.com/a/1190000006992218

webpack多頁(yè)應(yīng)用架構(gòu)系列（九）：總有刁民想害朕！ESLint為你阻擊垃圾代碼:https://segmentfault.com/a/1190000007030775

webpack多頁(yè)應(yīng)用架構(gòu)系列（十）：如何打造一個(gè)自定義的bootstrap:https://segmentfault.com/a/1190000007043716

webpack多頁(yè)應(yīng)用架構(gòu)系列（十一）：預(yù)打包Dll，實(shí)現(xiàn)webpack音速編譯:https://segmentfault.com/a/1190000007104372

webpack多頁(yè)應(yīng)用架構(gòu)系列（十二）：利用webpack生成HTML普通網(wǎng)頁(yè)&頁(yè)面模板:https://segmentfault.com/a/1190000007126268

webpack多頁(yè)應(yīng)用架構(gòu)系列（十三）：構(gòu)建一個(gè)簡(jiǎn)單的模板布局系統(tǒng):https://segmentfault.com/a/1190000007159115

webpack多頁(yè)應(yīng)用架構(gòu)系列（十四）：No復(fù)制粘貼！多項(xiàng)目共用基礎(chǔ)設(shè)施:https://segmentfault.com/a/1190000007301770

webpack多頁(yè)應(yīng)用架構(gòu)系列（十五）：論前端如何在后端渲染開(kāi)發(fā)模式下夾縫生存

webpack多頁(yè)應(yīng)用架構(gòu)系列（十六）：善用瀏覽器緩存，該去則去，該留則留

本文首發(fā)于Array_Huang的技術(shù)博客——實(shí)用至上，非經(jīng)作者同意，請(qǐng)勿轉(zhuǎn)載。
原文地址：https://segmentfault.com/a/1190000007159115
如果您對(duì)本系列文章感興趣，歡迎關(guān)注訂閱這里：https://segmentfault.com/blog/array_huang