因爲大多數人都比較喜歡，或者說傾向於用js操作現有的html代碼塊，而不喜歡用js來生成html代碼塊，之後再來操作它。很明顯的一點兒就是前者清晰明瞭，後者不是那麼直觀。
因此在開發中，我們會接觸到模板後者模板引擎這樣概念。我們比較常見的就是*.html模板，Java開發中的*.jsp，php開發中的*.php，還有用於node.js的*.ejs 和 *.jade（以及它的最新版本*.pug）。
這裏，着重說一下html和pug。
如何使用html-webpack-plugin的模板和注意事項
html-webpack-plugin 支持爲生成的頁面指定模板，我們可以直接使用配置項爲template，那麼這個指定的html模板應該如何操作，或者說應該怎麼操作，才能達到靈活多變的特性。
使用webapcK做多頁面應用的構建，我們當然是希望它能夠實現構建單頁面應用那樣的模塊化處理。
我們從構建建多頁面應用知道了構建多頁面應用，可以實現js代碼的模塊化，從構建多頁面應用——單個頁面的處理，知道了構建多頁面應用可以實現css代碼的模塊化。那麼，構建多頁面應用能實現html代碼的模塊化嗎？當然可以。
在上一篇文章中，有一個title不能注入到生成的頁面的問題，但是html-webpack-plugin插件可以解析<%= htmlWebpackPlugin.options.title %>這樣的語法，它內部可以寫js語法，同樣它也解決了title不能注入到生成的頁面的問題，但它有一個限制條件就是隻能使用在被當作模板的html文件中，其它的代碼塊無法使用，所以關於html代碼塊的模塊化，我們可以在模板文件上下下功夫。
使用過jQuery的同學都知道，我們可以使用$('#container').load('./pages/partial.html')的方法引入一個html代碼塊。而在webapck中，我們可以使用require('./pages/commons/header.html')的語法引入一個html代碼塊，但是webapck使用require引入的是一個文件流，不能和html模板文件相融合。所以這裏要引入html-loader來做處理，它可以將流文件轉化爲字符串，這樣就可以在html模板文件中使用了。
基於html-webpack-plugin的模板的實際操作
首先，本文中的構建多頁面應用的項目目錄圖：
├── src
│ ├── common // 公用的模塊
│ │ ├── a.js // 引用了a.css，模塊header.css，container.css, footer.css
│ │ ├── b.js // 引用了b.css
│ │ ├── c.js // 引用了c.css
│ │ ├── d.js
├── pages // html代碼塊
│ ├── template.html // 模板文件
│ ├── commons
│ │ ├── header.html
│ │ ├── footer.html
│ │ ├── container.html
├── assets // 靜態資源
│ ├── 19224132.jpg // 用來做頁面圖標
│ ├── css
│ │ ├── a.css
│ │ ├── b.css
│ │ ├── c.css
├── assets // 靜態資源
│ ├── 19224132.jpg // 用來做頁面圖標
│ ├── css
│ │ ├── a.css
│ │ ├── b.css
│ │ ├── c.css
│ │ ├── main.css
│ │ ├── abutus.css
│ │ ├── footer.css
│ │ ├── container.css
│ │ ├── header.css
│ ├── uttils // 工具
│ │ ├── load.js // 工具代碼load.js
│ ├── index.js // 主模塊index.js (包含a.js, b.js, c.js, d.js)，引用了main.css
│ ├── aboutUs.js // 主模塊aboutus.js (包含a.js, b.js)，引用了main.css, aboutus.css
│ ├── contactUs.js // 主模塊contactus.js (包含a.js, c.js)，引用了main.css
├── webpack.config.js // css js 和圖片資源
├── package.json
├── yarn.lock
新增了pages目錄，它裏面包含了html-webpack-plugin所需的模板文件和組成模板的各個模塊文件。
根據上文的分析，以及講述需要，我們定義了一個公用的模板文件template.html，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<!-- header -->
<!-- <%= require('html-loader!./commons/header.html') %> -->
<%= require('./commons/header.html') %>
<!-- container -->
<!-- <%= require('html-loader!./commons/container.html') %> -->
<%= require('./commons/container.html') %>
<!-- footer -->
<!-- <%= require('html-loader!./commons/footer.html') %> -->
<%= require('./commons/footer.html') %>
</body>
</html>
注：這裏可能有的人會有個疑惑。因爲熟悉構建單頁面應用的人都將html-loader放到webapck.config.js文件中，這樣可以一次配置，終身受用，如果你也像構建單頁面應用那樣操作的話，你需要小心再小心，因爲你不加控制的話，html-loader 也會處理template.html，再加之<%= htmlWebpackPlugin.options.title %>是html-webpack-plugin插件的獨有語法，這樣在webapck編譯的過程中，因爲html-loader先執行，所以會將它轉化爲字符串，而html-webpack-plugin後執行，所以，這樣的情況下，webpack生成的html頁面不是你所需要的。解決方法也很簡單你，只需要使用include選項即可(在webapck中使用include和exclude可以是loader的處理更精確，加開快編譯的速度)。
當然，根據世界開發需要，我們可根據頁面的不同設計效果和組成頁面的不同模塊來定義不同的html模板。
而對於哪些組成html模板的html模塊，我們可以像寫普通的html代碼塊那樣，如：header.html，它的代碼如下：
<div class="header">
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="aboutus.html">關於我們</a></li>
<li><a href="contactus.html">聯繫我們</a></li>
</ul>
</div>
如果你要對生成的html頁面壓縮，可以使用html-webpack-plugin的minify選項。
這樣，構建頁面應用的js、css、html代碼的模塊化就都實現了。
源代碼可參考webpack4.x multi-page
文章到這裏，基本算是完成了這一篇文章的目的。但是如果你想對html代碼進行更加細粒度的處理，可以考慮ejs或者pug。正如本文開始說的那樣，下面就只簡單的介紹pug的使用。
用pug對html代碼進行細粒度的操作
這裏，需要使用到的是pug-loader，它的作用和html-loader類似，只不過它有自己的語法，要經過從pug的語法到html的轉換過程。但是它有更靈活的語法，可以讓我們的頁面代碼更簡潔。
有些內容只用語言可能太空洞，還是用代碼還解釋。首先，模板的代碼：
doctype html
html(lang="en")
head
meta(charset="UTF-8")
meta(name="viewport" content="width=device-width, initial-scale=1.0")
meta(http-equiv="X-UA-Compatible" content="ie=edge")
title= htmlWebpackPlugin.options.title
body
// header
include ./commons/header.pug
// container
include ./commons/container.pug
// footer
include ./commons/footer.pug
注：因爲這裏使用了pug的語法，所以要使用pug依賴包，它實現的是pug語法到html的轉換，而pug-loader只是起到了一個加載解析的作用，所以使用前，我們要執行如下的安裝命令：
yarn add -D pug pug-loader
因爲pug不僅可以使用包含，還可以使用集成，擴展，迭代和混合的特性，可以讓我們隨心所欲的對html實現模塊化，所以深受開發者的喜愛。它們的具體使用可參考pug 官方文檔。
具體示例可參考webpack3.x multi-page的源代碼。
本篇文章要介紹的內容，到這裏是真的結束了。當然，還有很多東西沒有說完，如果需要可關注後續的文章。