构建多页面应用——模板
由于大多数人都比较喜欢，或者者说倾向于用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 htmlhtml(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的源代码。
本篇文章要详情的内容，到这里是真的结束了。当然，还有很多东西没有说完，假如需要可关注后续的文章。
构建多页面应用系列文章
- webpack 构建多页面应用——初探
- 构建多页面应用——单个页面的解决
- 构建多页面应用——模板
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是摆设，本站源码仅提供给会员学习使用！
7. 如遇到加密压缩包，请使用360解压,如遇到无法解压的请联系管理员
开心源码网 » 构建多页面应用——模板
