java - 带有 .JSP 索引文件的 Webpack

Question

所以这就是问题所在，目前我正在从事一个前端与后端紧密耦合的项目。应用程序的遗留版本是使用 .JSP 文件构建的，索引文件是 index.JSP 文件。

我目前的任务是在 Vue 中为我们的新前端编写一个开发环境，并使用 webpack 开发服务器来提供我们的新内容，并将包注入(inject)到 index.jsp 文件中。这就是我陷入困境的地方，我不知道将 webpack 开发服务器或 HtmlWebpackPlugin 脚本标签注入(inject) JSP 文件的任何方法。

任何帮助将不胜感激，因为我真的对此感到困惑。

Answer 1

恐怕用 webpack 捆绑(或处理)像 JSP 这样的服务器端组件不是一个好主意。此外，我认为 webpack 和加载器/插件不支持服务器端组件。好消息是它不是必需的，并且有一个中间立场。

也就是说，使用 JSP 和 webpack 的选项假设 webpack 已就位以捆绑所有/部分客户端代码(JS、CSS、SCSS 等...)

选项 1:使 webpack 捆绑成为 maven/ant/gradle 构建的一部分

• Webpack 将代码打包到 bundle.js
• 更新您的 JSP 页面以通过 script 标记包含此 bundle.js
• 修改您的构建(maven/ant/gradle/等)以在 java 代码构建阶段之一中包含 webpack 捆绑
• 在应用/网络服务器中部署您的代码

从某种意义上说，这有点限制，因为每次客户端代码之一发生变化时，都必须运行完整的 java 构建(maven/ant/gradle 等) ).这显然很耗时。

选项 2:使用应用程序/网络服务器安装位置中的已部署应用程序文件夹进行捆绑

• 在应用程序/网络服务器中有 webpack 输出包文件(可能需要运行带有 sudo 权限的 webpack，这取决于应用程序/网络服务器环境)。可以使用 --output-path 通过 webpack 来做到这一点。
• 以 watch 模式运行 webpack(可以根据您的方便、速度等选择开发/生产模式)

可以像往常一样继续使用CLIENT 代码。无需使用传统的 maven/ant/gradle 构建和部署。因此，与选项 1 相比，此选项更好。

这就是我们一直在开发中使用的并且被证明是好的

选项 3:在前端使用 apache 来为 webpack 开发服务器包和来自应用程序/网络服务器的 JSP 提供服务

只要 JSP 在图片中，就不可能使用 webpack 开发服务器。原因:虽然 webpack 开发服务器将捆绑客户端代码，但 JSP 由您的应用程序/网络服务器提供服务。现在，该应用程序/网络服务器只有作为您的 ear/war 的一部分部署的静态文件。它对 webpack 开发服务器跟踪客户端代码并在有更改时自动捆绑一无所知。

就是说，您可以尝试在前端安装 apache 网络服务器，该服务器又会与应用程序服务器和 webpack 开发服务器通信。这样您就可以避免在仅在客户端代码中进行更改时构建源代码。尽管 Option2 可以满足我们的需求，但我还没有尝试过。

希望对您有所帮助。

更新:添加了第二个更好用的选项。