带有 .JSP 索引文件的 Webpack答案

【问题标题】：Webpack with .JSP index file带有 .JSP 索引文件的 Webpack
【发布时间】：2018-05-29 18:00:49
【问题描述】：

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

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

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

【问题讨论】：

标签： java jsp webpack vuejs2 webpack-hmr

【解决方案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 捆绑
在应用/网络服务器中部署您的代码

说到限制，这有点限制，因为每次 CLIENT 端 代码之一发生更改时，都必须运行完整的 java 构建（maven/ant/gradle 等）。这显然很耗时。

选项 2：将应用程序/Web 服务器安装位置中的已部署应用程序文件夹用于捆绑包

在应用程序/Web 服务器中拥有 webpack 输出包文件（可能需要使用 sudo 访问运行 webpack，具体取决于应用程序/Web 服务器环境）。可以使用--output-path 来通过 webpack 做到这一点。
在监视模式下运行 webpack（可以根据您的方便、速度等选择开发/生产模式）

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

这是我们一直用于开发的，并且被证明是好的

选项 3：将 apache 放在前面，以便为 webpack 开发服务器包和来自 app/web 服务器的 JSP 提供服务

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

也就是说，您可以尝试在前面放置 apache Web 服务器，然后再与应用服务器和 webpack 开发服务器通信。这样，当更改仅在客户端代码中时，您可以避免构建源代码。虽然 Option2 满足了我们的需求，但我还没有尝试过。

希望对您有所帮助。

更新：添加了第二个效果更好的选项。

【讨论】：

这是一个非常好的细分，帮助我理清了一些关于这个问题的思考过程，我很想从图片中删除 JSP 并简单地让我们的应用程序通过 REST 端点说话，但是唉，我认为这是不可能的。我可能会给选项 1 一个好的选项，看看这周会发生什么。
@EvanBurbidge，我正在考虑做类似的事情，这样我就不必手动添加从 webpack 生成的包的脚本标签。我很好奇，你是怎么做到的？另外，如果它有效，你能分享你的 webpack.config 文件吗？在此先感谢:)

【解决方案2】：

我能够使用 JSP 和 Webpack 4 解决 webpack devServer 问题。我使用 Intellij 和 Tomcat 进行开发。这个想法是在开发过程中，js 包由 webpack 开发服务器在端口 3000 上提供服务（tomcat 在 8080 上）。我使用 JSP var 作为包的基本路径，以便在 dev 和 prod 之间轻松切换。

这里是 devServer 的 webpack.dev.js 部分：

 devServer: {
        contentBase: './webroot/dist',
        watchContentBase: true,
        port: 3000,
        publicPath: 'http://localhost:3000/bigtech/dist'
    }

我的捆绑包的实际开发路径（在 jsp 解析之后）是这样的： http://localhost:3000/bigtech/dist/index-bundle.js

在jsp中是这样的：

<script src="<%=baseJSBundleDir%>/dist/index-bundle.js" ></script>

我们通过一个检查是否开发模式的java函数设置baseJSBundleDir（在属性文件中设置）。

运行 webpack devServer 后，当我在任何 js 文件中保存更改时，我的浏览器会立即自动重新加载更新后的新包代码，太好了！

【讨论】：

【解决方案3】：

在我的情况下，JPS 是 JS 应用程序的容器，因此使用开发服务器很复杂。

试试“watch”：“webpack --watch”

您必须手动刷新页面，但作为一种解决方法可以正常工作

【讨论】：