Webpack 一个工程输出任意页面

yuanoook
yuanoook 发布于 2016-11-30 22:15:55 浏览:460 类型:原创 - 随笔 分类:JavaScript - 待整理 二维码: 作者原创 版权保护
问题
场景:Webpack + Vue 用来做APP内嵌H5项目,碎片化比较严重,每次输出都是一个 html ( css、javascript 都用 htmlone 打包在 html 中 ),数据全部来自后端接口。
尴尬:每做一个 html,都要新建一个项目,npm install 一次,自己开发的组件都拷贝一次。
目标:可以把多页面代码放在一个工程里面,既可以共享公共组件,又相对独立。可以通过命令行参数分开打包输出。

方案
https://github.com/yuanoook/pageshop
就像汽车厂一样。可以为每一个车型,新建一座工厂,调度物资然后开始生产。当然也可以在一个工厂,根据不同的指令,生产不同的车型。我更偏向与后一种方案。

思路
NPM CLI Params > Webpack.config.js 行为 > 页面输出
命令行参数,影响 webpack 行为,影响页面输出

关键点
1. 当 npm run script.js --page=index 的时候,你可以在 script.js 里面得到 process.env.npm_config_page==="index"
2. webpack.config.js 根据不同的page参数,分配不同的入口 entry,HtmlWebpackPlugin 应用不同的 trunks 输出不同的出口 html
3. HtmlWebpackPlugin 中使用统一的 index.html 做模版,应用 ejs-compiled-loader 加载,ejs 通过不同的配置参数,合并不同的 html 代码片段
4. 参数传递:CLI 参数 > page_default_config > pages_config.json >  htmlWebpackPlugin.options > HTML文件结果
5. 数据 API 代理,用 mockjs,本地开发做假数据,直接输出 mockjson 里面的文件。
6. HTMLONE 压缩输出单一 html 文件,是在 WebpackShellPlugin 中完成的,非常喜欢这个插件,在这里可以调用 shell,如使用 git/ftp 工具可以做到一键发布。

*. 关于前后端分离开发的多种配合方式
1. 通过 Restful API 传递数据:这里使用 proxy mockjson 的方式,可以在和后端约定数据格式之后,就可以完全独立开发了。
2. 后端语言在 html 中预植入数据:如JSON 或者 HTML片段,可以在 ejs-compiled-loader 加载 html 的时候,区分开发环境和正式环境,开发环境加载拼接 fake 的 html 片段替代,正式打包拼接后端语言片段(如 PHP)。

*. 关于测试包和正式包
生成的HTML文件,需要发到测试环境,发测试包。测试包里面可以包含测试代码(如 window.onerror = alert)。这些测试代码,可以通过 ejs-compiled-loader 按条件加载拼接的。

*. ejs-compiled-loader 的其他妙用
通过 pages_config.json 配置扩展,传递到 ejs-compiled-loader 的条件判断,组装拼接不同的 html。可以实现类后端的项目页面输出功能:
微信用页面需要微信分享,其他不用,可以。
APP用的页面加native api 封装,其他不用,也可以。
测试包加上测试代码,正式包不加,还是可以。

那么
终于可以在一个工程里面管理多个项目了,哈哈哈哈哈哈哈哈,再也不用做一个页面 npm install 一次咯,哈哈哈哈哈哈哈

参考
https://github.com/yuanoook/pageshop
https://docs.npmjs.com/cli/config
http://mockjs.com/examples.html
https://www.npmjs.com/package/webpack-shell-plugin
https://www.npmjs.com/package/gulp-htmlone
标签:
z
给个赞 0 人点赞
收藏 2 人收藏
评论 已有 2 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
yuanoook
yuanoook2016-12-01 10:03:182F
Webpack 真心好用,慢慢学咯 //@277039203:我这种新手看不懂
举报 支持 (0) 回复 (0)
277039203
2770392032016-12-01 09:30:171F
我这种新手看不懂
举报 支持 (0) 回复 (1)
yuanoook yuanoook 作者

享受平凡 | 追求卓越

作者最新