使用现代JS框架构建多页面应用程序的好方法是什么？
多页面应用程序
在多页面应用程序中,我们有多个模板使用一些"模板语法"来为我们提供后端数据和AJAX(如果需要)或高级UX voodoo通常由jQuery处理.
单页面应用程序
在单页面应用程序中,"后端数据"由AJAX请求和整个路由提供,前端逻辑由JS处理.我们经常使用像Angular或React这样的JS框架,并使用webpack或gulp等任务运行器/捆绑器编译我们的源代码.
混合应用
但网络上最受欢迎的似乎是混合应用程序.使用这样的应用程序时,典型的构建工作流程是什么？我找不到任何教程或指南.
所以要具体一点.我想象webapp在哪里,每个页面都必须编译并可以共享一些资源.每个页面都有自己的JS路由,如向导或子组件.在页面加载和AJAX期间加载数据.
例如,我的webapp将有3页:
任务运行器/捆绑器
例如,在webpack中有一种指定多个入口和输出点的方法吗？也许更好的方法是拥有多个webpack/gulp配置.在那种情况下,如果我有很多页面,我将不得不为每个页面编写webpack/gulp配置,即使它们中的一些可能完全相同.如何运行这种构建？
共享资源
浏览器是否会在相同的域内使用相同的散列(如bundle.a2k4jn2.js)加载缓存的js包但不同的地址？如果是这样,如何在webpack或gulp等工具中指定这样的行为.我听说CommonsChunkPlugin但不确定如何使用它,甚至我正在寻找正确的方向.
模板
如果我想加载一些"后端"数据而不是通过AJAX但是在页面加载时该怎么办？当然,每个模板引擎都能让我们直接在JSP或PHP等html模板中编写本机代码.但是如果某些路由由JS处理并且"模板标记"在初始加载时对页面不可见,那么模板将不会被编译.有时服务器和客户端中的模板引擎可能具有相同的特殊标记,如Blade和Angular,这可能会导致冲突.
目录结构
我想在混合应用程序的前端和后端将紧密耦合.在混合应用程序中共享JS可能会导致非常复杂的导入(在es6或html脚本标记中).如何保持简单.
部署
部署应用程序怎么样？在java中它很容易,因为我们只是在构建工具(maven,gradle)中指定目录(编译页面),它们被复制到jar/war,但在PHP源代码中没有编译如何保持"js source"远离生产我不能除了编写自己的批处理/ bash脚本之外,想象一下合理的解决
摘要
我已经提到了具体的技术和框架.但我的问题是关于使用这种webapp的常用方法,而不是"如何使用该工具".虽然代码示例将非常感激.