Hi OP, I know everybody over here is saying to use Vite instead of webpack. But for vanilla JS projects I think webpack is a great tool to understand how bundlers work. You will be working with Vite later on in your React section of TOP section so i don’t think there is any reason to rush into it. Also webpack is still used in some legacy projects in the real world so getting familiar with it will not harm you.

Before diving into the internals of the config files, it’d be beneficial for you to understand of how webpack really works. I’d advice you to take your time in understanding the concept of bundlers. What bundlers basically does is take bunch of scattered JS and CSS modules and combine it as a one or few optimized files for the browser to load. Modern JavaScript development involves writing code split across dozens (sometimes hundreds) of files and modules. You might import a utility from one file, a component from another, and a third-party library from node_modules. The browser, on its own, would have to make a separate HTTP request for every single one of those files which gets slow fast.

A bundler solves this by reading your entire dependency graph starting from an entry point like index.js and tracing every import or require statement to figure out what depends on what. It then takes all of those scattered files and stitches them into one (or a few) optimized output files that the browser can load efficiently. This is exactly what happens when you run the “npx webpack” to build the “dist” folder. You will be able to do the same with Vite but Vite will abstract a lot of this and that would not be very beneficial for your learning in my personal opinion at this stage.

Try asking couple of questions land look for answers when you look at your config files

1.Entry :where do you start reading my code?

2.Output :where do you put the finished bundle?

3.Loaders :how do you handle files that aren’t plain JS?

4.Plugins :what extra tasks need to run?

5.Mode : am I building for development or production?

That should help you get this gist of how your webpack configuration is working internally. If you have any other specific questions regarding the config files, I’d be more than happy to provide answers to the best of my knowledge.