所以这就是问题所在,目前我正在从事一个前端与后端紧密耦合的项目。应用程序的遗留版本是使用 .JSP 文件构建的,索引文件是 index.JSP 文件。
我目前的任务是在 Vue 中为我们的新前端编写一个开发环境,并使用 webpack 开发服务器来提供我们的新内容,并将包注入(inject)到 index.jsp 文件中。这就是我陷入困境的地方,我不知道将 webpack 开发服务器或 HtmlWebpackPlugin 脚本标签注入(inject) JSP 文件的任何方法。
任何帮助将不胜感激,因为我真的对此感到困惑。
最佳答案
恐怕用 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 可以满足我们的需求,但我还没有尝试过。
希望对您有所帮助。
更新:添加了第二个更好用的选项。
关于java - 带有 .JSP 索引文件的 Webpack,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47833812/