使用现代JS框架构建多页面应用程序有哪些好的做法？
多页面应用
在多页面应用程序中，我们有多个模板，使用一些“模板语法”为我们提供后端数据和AJAX（如果需要）或高级用户体验voodoo通常由jQuery处理。
单页面应用
在单页面应用程序中，“后端数据”由AJAX请求和整个路由提供，前端逻辑由JS处理。我们经常使用像Angular或React这样的JS框架，并使用任务运行器/捆绑器（如webpack或gulp）编译我们的源代码。
混合应用
但网络上最受欢迎的似乎是混合应用。使用这样的应用程序时，典型的构建工作流程是什么？我找不到任何教程或指南。
所以要具体。我想象webapp在哪里，每个页面都必须编译并可以共享一些资源。每个页面都有自己的JS路由，如向导或子组件。在页面加载和AJAX期间加载数据。
例如，我的webapp将有3页：
任务管理器/捆绑器
例如在webpack中有没有办法指定多个输入和输出点？也许更好的方法是拥有多个webpack / gulp配置。在那种情况下，如果我有很多页面，我将不得不为每个页面编写webpack / gulp配置，即使它们中的一些可能完全相同。如何运行这种构建？
分享资源
浏览器是否会在相同的域中使用相同的哈希值加载缓存的js bundle，例如 bundle.a2k4jn2.js 但是地址不同？如果是这样，如何在webpack或gulp等工具中指定这样的行为。我听说过 CommonsChunkPlugin ，但不知道如何使用它，甚至我正在寻找正确的方向。
模板
如果我想加载一些“后端”数据而不是通过AJAX但是在页面加载时该怎么办？当然，每个模板引擎都能让我们直接在JSP或PHP等html模板中编写本机代码。但是，如果某些路由由JS处理并且“模板标记”在初始加载时对页面不可见，即模板将不会被编译。有时服务器和客户端中的模板引擎可能具有相同的特殊标记，如Blade和Angular，这可能会导致冲突。
目录结构
我认为混合应用程序的前端和后端将紧密耦合。在混合应用程序中共享JS可能会导致非常复杂的导入（在es6或html脚本标记中）。如何保持简单。
部署
部署应用程序怎么样？在java中它很容易，因为我们只是在构建工具（maven，gradle）中指定目录（编译页面），它们被复制到jar / war，但在PHP源代码中没有编译如何保持“js source”远离生产我不能除了编写自己的批处理/ bash脚本之外，想象一下合理的解决方案
摘要
我已经提到了具体的技术和框架。但我的问题是关于使用这种webapp的常用方法，而不是“如何使用该工具”。虽然代码示例将非常受欢迎。
答案 0 :(得分：4)
他们在这个问题中有很多，作为起点，您可以在 webpack 中定义多个入口点。
https://webpack.js.org/concepts/entry-points/
如果你想在 FE 和 BE 之间混合加载数据，那么你真的需要编写一个同构的 JS 应用程序并使用 Node 作为你的 BE，否则你最终会用不同的语言编写两次，并且一次遇到一个项目像那样，相信我，你真的想避免这种情况。
关于共享资源的这个问题的另一部分最好由 WebPack 的 bundle splitting 来回答，它是为这里提出的问题而设计的
答案 1 :(得分：0)
不确定我是否完全理解这个问题，但是 single-spa（是的，它是多余的）是一种可用于将多个应用程序（即使它们是不同的框架）组合到一个单页面应用程序中的工具。文档链接：https://single-spa.js.org/docs/getting-started-overview