Why is server.js never built in Webpack?

Question

I am using Vue.js 3 for my front end, and Node/Express on the back-end. I am trying to enable server side rendering which is proving difficult.

I understand the client-side is built into a file called app.js . However I never see server.js being built and exported to the dist folder? Here are some examples:

1. vue-hackernews where there is an entry-client.js and entry-server.js file being provided to Webpack, but server.js is not anywhere to be seen.
2. Another question/answer also only provides main.server.js as the server entry file and does not build server.js .

It is my understanding that server.js is the back-end and has to run for Node.js/Express to work. In the above two examples what exactly is being built from the server entry files because it doesn't seem to be server.js where the Express routes live. Surely server.js must be built to the dist folder so that it can be accessed and run by a web server like Windows IIS for example (which I am using)?

Answer 1

You are correct, usually there is no need to bundle the server code.

But there are some benefits from doing so:

1. One project wide configuration, must of the client & server config can be shared - no need to maintain multiple build tools
2. Server code HMR (Hot Module Replacement)- you can swap your server code during dev without the need to restart the server
3. Code sharing between client & server
4. Code transpilation - server code can be written in modern syntax (ESM etc...) and it will be transpiled to the target node version.