Teach me to organize\build my code with webpack and vscode

I am building the following site: cookiecad.com. There are a number of JS and CSS files and I would like to build and minify them properly using webpack. I would like you to help me learn how to do that properly so that my project is well organized but still allows me to debug. 1) Teach me the steps to build my project with webpack (or similar tool) as I code it in VSCode. 2) I need to understand how it will work while I code in VSCode. If I edit the source files, how do I then build them so I can preview. 3) I need to be able to easily view a live preview from a dev server on my machine. I've been using "live preview" extension in vscode but I am fine switching to something else like webpack dev server or lite server. 4) I would like to understand how you debug scripts that have been built. If the browser is running the build version of the script and shows an error on a line of code - how do you find the corresponding lines of code in your source files (which would have different line numbers)? 5) Teach me how to build the code for development and production. I assume during development you do not do things like minify the code but when building for production you do. I also want to 6) Help me set up webpack to add version numbers or content hashes to the output files. 7) Help me set up webpack to use absolute HTTP paths when building the site for production 7) Help me to actually bundle and minify / reduce the number of JS files in my project. Please only bid on this project if you have extensive experience managing projects with webpack (or similar) and visual studio code (VSCode) and are very familiar with building and debugging with webpack and vscode. Please mention your experience and that you've looked at my website in your bid so I know you've read this. Thank you!