『背景』
我司目前大多数项目都以Vue或React进行开发。就在上个月来了一个多页面的官网页开发需求，最后输出页面多达20+，但大多数页面可以用同一个模板输出，只是其中部分数据有所不同。例如产品下有数个不同产品，每个产品都要有一个单独的页面，其中的布局都相同，只有文案与图片需要进行替换。并且项目要对SEO进行支持。在一番斟酌过后选择了webpack + art + jq的方案。
『art-template』
art-template 是一个简约、超快的模板引擎。并且同时支持NodeJS和浏览器。
之所以会选择art是因为它的模板语法，那说到模板语法肯定会有人问为什么不用ejs呢？ 开始的时候使用的就是ejs，但是ejs-loader在热更新上有问题，并且监听不到新增页面，在开发阶段十分的不便，就替换了也拥有ejs模板语法的art-template了。
art语法支持模板引入，所有的复用的模板都抽离出来，和平时在vue中写组件一样。
通过include即可引入到各个页面。在语法上还有有输出、条件、循环、子模版等，可根据各自项目进行相应的配置。
『webpack』
webpack需要对文件入口以及输出做相应的配置，主要是通过entrys 和tpls 函数循环读取相应的信息，分别写入到webpack的entry和HtmlWebpackPlugin中。
对应页面的SASS则是通过js import进入。再通过MiniCssExtractPlugin编译后生成单独css引入到页面中。
因为本文主要介绍多页面的解决，代码显示只是一部分的webpack配置，还有其他Plugin、Loader不在本次介绍内，需要的可自行选择喜欢的Plugin、Loader
项目使用了webpack-chain进行链式修改webpack配置，具体语法请参考Github
page.json则是管理所有多页面配置的文件
- filename 对应输出目录
- tpl 对应输入模板路径
- script/chunk 对应引入js路径 js名
- params 对应注入数据
像上面👆tpl中所写的 {{title}} 就是通过这里进行数据注入的
这样定义一个单独的配置JSON的好处是能够对每个页面都进行相应的定制,别人在接手项目的时候也能清楚的看到每个页面的配置，能够快速对自己所需功能进行配置。
坏处是修改了配置JSON后需要重新编译文件。还有当项目页面逐渐增加后，需要Ctrl C/V的次数会逐步上升
到了这一步也就完成了项目整体框架的搭建，后面也就能愉快的开发啦。
