Webpack with .JSP index file

Question

So heres the issue, current I am working on a project where the frontend is tightly coupled to the backend. The legacy version of the application is built using .JSP files, the index file is an index.JSP file.

My current task is to write a development environment for our new frontend in Vue and use the webpack dev server to serve our new stuff and also to inject the bundles into the index.jsp file. That's where i'm getting stuck, I don't know any way of injecting the webpack dev server or HtmlWebpackPlugin script tags into the JSP file.

Any help would be appreciated as I'm really at a wall with this.

Answer 1

I am afraid bundling (or processing) a server side component like JSP with webpack is not a good idea. More over, I dont think the webpack and loaders/plugins does support server side component. Good thing is that its not required and there is a middle ground.

That said, the options to use JSPs along with webpack assuming webpack is in-place to bundle all/part of your CLIENT side code (JS, CSS, SCSS etc...)

Option 1: Make webpack bundling part of maven/ant/gradle build

• Webpack bundles out the code into bundle.js
• Update your JSP page to include this bundle.js via script tag
• Modify your build (maven/ant/gradle/ etc) to include webpack bundling in one of the java code build phases
• Deploy your code in the app/web server

Coming to limitation, this is somewhat restrictive in the sense that every time there is a change in one of the CLIENT side code, one has to run full java build (maven/ant/gradle etc). This is obviously time consuming.

Option 2: Use deployed app folder in app/web server installed location for bundles

• Have webpack output bundle files inside the application/web server (may need to run webpack with sudo access depending on the app/web server env). One can use --output-path to do that with webpack.
• Run webpack in watch mode (can choose dev/production mode per your convenience, speed etc)

One can continue working with CLIENT code as usual. No need to use traditional maven/ant/gradle build and deploy. So, this option is better compared to Option1.

This is what we have been using for development and is proved to be good

Option 3: Have apache in the front to serve both webpack dev server bundles and JSPs from app/web server

Using webpack dev server wont be possible as long as JSP is in the picture. Reason : while webpack dev server will bundle the client side code, the JSP is served by your app/web server. Now, that app/web server has only the static files deployed as part of your ear/war. It does not know anything about the webpack dev server keeping track of the client side code and auto bundling whenever there is change.

That said, what you can try is to have apache web server in the front that in turn will talk to both app server and webpack dev server. That way you can avoid building source code when the change is only in client side code. I haven't tried that though with Option2 sufficing our needs.

Hope that helps.

Update : Added second option that works nicer.