因?yàn)榇蠖鄶?shù)人都比較喜歡贞绵，或者說傾向于用js操作現(xiàn)有的html代碼塊，而不喜歡用js來生成html代碼塊恍飘，之后再來操作它榨崩。很明顯的一點(diǎn)兒就是前者清晰明了，后者不是那么直觀章母。
因此在開發(fā)中母蛛，我們會(huì)接觸到模板后者模板引擎這樣概念。我們比較常見的就是*.html模板乳怎，Java開發(fā)中的*.jsp彩郊，php開發(fā)中的*.php，還有用于node.js的*.ejs 和 *.jade（以及它的最新版本*.pug）蚪缀。
這里焦辅，著重說一下html和pug。
如何使用html-webpack-plugin的模板和注意事項(xiàng)
html-webpack-plugin 支持為生成的頁面指定模板椿胯，我們可以直接使用配置項(xiàng)為template筷登，那么這個(gè)指定的html模板應(yīng)該如何操作，或者說應(yīng)該怎么操作哩盲，才能達(dá)到靈活多變的特性前方。
使用webapcK做多頁面應(yīng)用的構(gòu)建，我們當(dāng)然是希望它能夠?qū)崿F(xiàn)構(gòu)建單頁面應(yīng)用那樣的模塊化處理廉油。
我們從構(gòu)建建多頁面應(yīng)用知道了構(gòu)建多頁面應(yīng)用惠险，可以實(shí)現(xiàn)js代碼的模塊化，從構(gòu)建多頁面應(yīng)用——單個(gè)頁面的處理抒线，知道了構(gòu)建多頁面應(yīng)用可以實(shí)現(xiàn)css代碼的模塊化班巩。那么，構(gòu)建多頁面應(yīng)用能實(shí)現(xiàn)html代碼的模塊化嗎嘶炭？當(dāng)然可以抱慌。
在上一篇文章中逊桦，有一個(gè)title不能注入到生成的頁面的問題，但是html-webpack-plugin插件可以解析<%= htmlWebpackPlugin.options.title %>這樣的語法抑进，它內(nèi)部可以寫js語法强经，同樣它也解決了title不能注入到生成的頁面的問題，但它有一個(gè)限制條件就是只能使用在被當(dāng)作模板的html文件中寺渗，其它的代碼塊無法使用匿情，所以關(guān)于html代碼塊的模塊化，我們可以在模板文件上下下功夫信殊。
使用過jQuery的同學(xué)都知道炬称，我們可以使用$('#container').load('./pages/partial.html')的方法引入一個(gè)html代碼塊。而在webapck中涡拘，我們可以使用require('./pages/commons/header.html')的語法引入一個(gè)html代碼塊玲躯，但是webapck使用require引入的是一個(gè)文件流，不能和html模板文件相融合鲸伴。所以這里要引入html-loader來做處理府蔗，它可以將流文件轉(zhuǎn)化為字符串，這樣就可以在html模板文件中使用了汞窗。
基于html-webpack-plugin的模板的實(shí)際操作
首先姓赤，本文中的構(gòu)建多頁面應(yīng)用的項(xiàng)目目錄圖：
├── 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 // 靜態(tài)資源
│ ├── 19224132.jpg // 用來做頁面圖標(biāo)
│ ├── css
│ │ ├── a.css
│ │ ├── b.css
│ │ ├── c.css
├── assets // 靜態(tài)資源
│ ├── 19224132.jpg // 用來做頁面圖標(biāo)
│ ├── 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所需的模板文件和組成模板的各個(gè)模塊文件。
根據(jù)上文的分析许帐，以及講述需要劳坑，我們定義了一個(gè)公用的模板文件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>
注：這里可能有的人會(huì)有個(gè)疑惑成畦。因?yàn)槭煜?gòu)建單頁面應(yīng)用的人都將html-loader放到webapck.config.js文件中距芬，這樣可以一次配置，終身受用循帐，如果你也像構(gòu)建單頁面應(yīng)用那樣操作的話框仔，你需要小心再小心，因?yàn)槟悴患涌刂频脑挘?code>html-loader 也會(huì)處理template.html拄养，再加之<%= htmlWebpackPlugin.options.title %>是html-webpack-plugin插件的獨(dú)有語法离斩，這樣在webapck編譯的過程中，因?yàn)?code>html-loader先執(zhí)行，所以會(huì)將它轉(zhuǎn)化為字符串跛梗，而html-webpack-plugin后執(zhí)行寻馏，所以，這樣的情況下茄袖，webpack生成的html頁面不是你所需要的操软。解決方法也很簡單你嘁锯，只需要使用include選項(xiàng)即可(在webapck中使用include和exclude可以是loader的處理更精確宪祥，加開快編譯的速度)。
當(dāng)然家乘，根據(jù)世界開發(fā)需要蝗羊，我們可根據(jù)頁面的不同設(shè)計(jì)效果和組成頁面的不同模塊來定義不同的html模板。
而對于哪些組成html模板的html模塊仁锯，我們可以像寫普通的html代碼塊那樣耀找，如：header.html，它的代碼如下：
<div class="header">
<ul>
<li><a href="index.html">首頁</a></li>
<li><a href="aboutus.html">關(guān)于我們</a></li>
<li><a href="contactus.html">聯(lián)系我們</a></li>
</ul>
</div>
如果你要對生成的html頁面壓縮业崖，可以使用html-webpack-plugin的minify選項(xiàng)野芒。
這樣，構(gòu)建頁面應(yīng)用的js双炕、css狞悲、html代碼的模塊化就都實(shí)現(xiàn)了。
源代碼可參考webpack4.x multi-page
文章到這里妇斤，基本算是完成了這一篇文章的目的摇锋。但是如果你想對html代碼進(jìn)行更加細(xì)粒度的處理，可以考慮ejs或者pug站超。正如本文開始說的那樣荸恕，下面就只簡單的介紹pug的使用。
用pug對html代碼進(jìn)行細(xì)粒度的操作
這里死相，需要使用到的是pug-loader融求，它的作用和html-loader類似，只不過它有自己的語法算撮，要經(jīng)過從pug的語法到html的轉(zhuǎn)換過程生宛。但是它有更靈活的語法，可以讓我們的頁面代碼更簡潔钮惠。
有些內(nèi)容只用語言可能太空洞茅糜，還是用代碼還解釋。首先素挽，模板的代碼：
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
注：因?yàn)檫@里使用了pug的語法蔑赘，所以要使用pug依賴包，它實(shí)現(xiàn)的是pug語法到html的轉(zhuǎn)換，而pug-loader只是起到了一個(gè)加載解析的作用缩赛，所以使用前耙箍，我們要執(zhí)行如下的安裝命令：
yarn add -D pug pug-loader
因?yàn)閜ug不僅可以使用包含，還可以使用集成酥馍，擴(kuò)展辩昆，迭代和混合的特性，可以讓我們隨心所欲的對html實(shí)現(xiàn)模塊化旨袒，所以深受開發(fā)者的喜愛汁针。它們的具體使用可參考pug 官方文檔。
具體示例可參考webpack3.x multi-page的源代碼砚尽。
本篇文章要介紹的內(nèi)容施无，到這里是真的結(jié)束了。當(dāng)然必孤，還有很多東西沒有說完猾骡，如果需要可關(guān)注后續(xù)的文章。
