这篇文章适合哪些人？??????H5页面常见于手机淘宝、京东、今日头条、美优等用户过亿的手机APP。它们具有更新快、灵活、易于共享和传播的特点。这里有几个h5的例子：（手淘，美友）。这些应用程序中嵌入了数百或数千个h5网页。他们开发这些h5背后的框架是什么？可能你也想开发一些h5，或者简单的react，vue应用，做一些广告，做一些交互营销，发布到朋友圈传播，那么如何快速搭建发布这些h5呢？也许你是一个很久没有从事前端工作的初学者。搭建这样一个多页面的h5网站，什么样的架构才是正确的打开方式呢？或许你想学习耳熟能详的webpack、vue、nodejs、es6、MERN框架的另类玩法，那么这篇文章同样适合你！最重要的是，如果你厌倦了移动端适配和移动端性能优化，只想专注于功能开发，那么这篇文章适合你！您从头开始构建一个项目，开发一个h5页面并发布到网上需要多长时间？滴答滴答！~你可能需要做以下事件？？搭建服务器项目，划分目录结构，配置数据库mysql、mongodb、redis；构建前端项目，划分目录结构front-end，将server划分为dev、test、prod环境。前端配置webpack进行编译，多个h5就是多页，可能你要搞清楚webpack多页的配置方案，就可以开始开发了。手机h5还有适配问题，ios有retina屏，android老机型要兼容开发。是时候生产发布编译，把生产的静态文件放到服务器上了？不，CDN上传更好。下一步是部署。单个实例很容易挂掉。需要集群发布或者引入pm2集群发布。好久好久终于上线了，大家可以转发朋友圈啦~折腾多了就知道要多久了。麻烦的事，总有相应的解决办法。发布的multipages-generator可能对您有所帮助！为多页生成器服务！??multipages-generator是一个类似于express-generator的npm模块，一键生成多页h5网站架构模板；主要针对移动端h5，或者简单的vue、react、angular应用网站架构模板；这个架构模板其实也是淘宝、今日头条、美优等公司开发的APP网站架构的缩影。请注意，它是一个架构，一个移动解决方案，而不是一个可以部署的网站模板。其主要特点是完备、精准、全面，基本具备了开发h5所需要的一切。本质是开发出来的网页性能高（以后会更好），手机适配好。如果有特殊功能，请到github查看。h5制作截图，使用multipags-generator开发下面的h5，我粗略估计只需要1个小时。也可以用手机chrome，微信，淘宝扫一扫打开体验，可以测试其性能，android，ihone4/5/6/7/8，iphonex等兼容性（使用淘宝flexible，Everything他在这里得到支持）。multipages-generator支持以下特性：支持webpack编译多个页面，可以编译指定项目，也可以编译所有项目的所有内容）支持开发、生产环境区分生产环境可配置生产css、js、图片自动编译上传到OSS服务器webpack编译好的html模板支持ejs等模板引擎使用node.js作为服务，nodemon热更新支持pm2集群启动？(New)增加手淘灵活布局方案，适配不同尺寸和DPI的屏幕，增加postcss支持？（新增）支持生产发布模式，配置七牛云CDN，编译js、css、图片等资源文件上传cdn安装可以通过npm全局安装：npminstallmultipages-generator-g创建并运行？第一步：执行multipages-generatemultipages-generate第二步：输入项目名称提示，输入你的项目名称？项目名称：<输入项目名称>第三步：进入目录->安装->开始安装依赖项：%scd%s&&npminstall运行应用程序：npmrunstart或：pm2startprocess.json运行和开发启动服务器上面已经启动了，如果你还没有执行过上面的步骤，执行下面的命令npmrunstart前端热启动项目facemerge打开另一个终端黑窗npmrunwatch:facemerge会打开一个页面，如果没有，手动打开http://localhost:2000注意：这个应用需要启动两个服务，一个是服务端node.js（默认端口4000），一个是前端（browser-sync，默认2000）。为了让开发更愉快，启动了前端服务，带有热更新每次更新的性能自动编译输出到express工程对应目录。项目部署时无需启动；新建项目的apps目录下有两个项目facemerge和viewport。添加新项目xxx，目录结构需要参考facemerge├─facemerge│├─assets││├─css││└─imgs│├─js│└─views└─voicemerge"watch:facemerge":"rimrafpublic&&cross-envENV=devPROJECT_NAME=facemergenode./tools/webpack.watch.js”启动方式同上述“开发方式启动项目facemerge”开发完成后发布上线。这里也有一套30分钟发布到网上以上教程仅供个人玩玩，不能用于制作。但其实企业用的核心思想也是这套+cI自动化部署；综上所述，本文介绍multipages-generator（简称MG）快速构建移动端h5项目，快速发布自己的应用到云服务器。希望对前端同仁有所帮助。现在名爵还在不断的迭代进化中。如果对你有帮助，希望能开启我的GitHub，鼓励我前行？！
