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

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

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

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

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

首先來看一個上文提到的例子：

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

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

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

先來看看我是如何給html-webpack-plugin指定一個js作為模板的：

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

下面來介紹這個作為模板接口的js文件：

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

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

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

  

    
<%= pageTitle %>
    
  

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

/* 選自webpack-seed/src/public-resource/layout/layout/html.js */
const config = require("configModule");
const noJquery = require("withoutJqueryModule");
const layout = require("./html.ejs"); // 整個頁面布局的模板文件，主要是用來統(tǒng)籌各個公共組件的結(jié)構(gòu)
const header = require("../../components/header/html.ejs"); // 頁頭的模板
const footer = require("../../components/footer/html.ejs"); // 頁腳的模板
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 = {
  /* 處理各個頁面?zhèn)魅攵中枰诠矃^(qū)域用到的參數(shù) */
  init({ pageTitle }) {
    pf.pageTitle = pageTitle; // 比如說頁面名稱，會在
   
  

  
  
  


  

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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