Where to install webpack using client/server folder structure

Question

Im building a React Nodejs web application and Im trying to understand how to bundle the frontend with webpack. [

This is my project structure

Where should I install webpack and configure webpack.config.js? Most of the project structures I have seen put the frontend folder inside the backend folder, also in some projects they also bundle the backend separately. Can someone give me an explanation on where to implement it with this folder structure? I'm really confused

This article was kind of getting to the point but didnt solve my question

Answer 1

Webpack should be part of the frontend repository, so it should go into the frontend/package.json . Similarly, just like frontend/eslintrc.json is your linting settings for your frontend, you should create a frontend/webpack.config.js for your frontend webpack config.

Since you're in VSCode, it looks like, when dealing with just the frontend, you could consider making things easier on yourself by going to File -> Open Folder -> select the Frontend folder, and then you can easily operate on it, its package, and everything it contains (without getting mixed up with the backend at all).

Where your frontend folder goes is up to you, but your current approach is fine - organizing to have a /frontend and a separate /backend folder in the same parent directory if you wish.