JAVASCRIPT ~ JANUARY 08 2023
When I started out on the journey all Developers take through the the Javascript universe, someone said something to me while I was studying that really stuck and I still recall it today whenever I'm feeling daunted by something new. He said..
mate, all Javascript really is, is a bunch of objects and lists of objects
In reality yes, it is far more than that but when you're breaking things out in your mind, thinking in this way really helps. Have a look at this, does it look scary to you?
I hope the answer is no; if it isn't, it's probably a good idea to brush up on some basics, which I'll endeavor to write more of in time.
This is the base skeleton of a Webpack configuration which is simply setting up a bunch of parameters to suit your Front End Project. There are various things to consider on top of and around this configuration, such as various environments, what resources you would like Webpack to manage for your project, how you want to work with it locally compared to deploying for production and many more. When you start with the basics like this though, it can really clarify the core of what you are working with.
As you can clearly see now, there are 6 main objects required to make a relatively basic Webpack build.
First off, I'll quickly go over entry, mode & output as they're quite straightforward to understand. entry is simply the name of the first file that Webpack needs to connect itself to your application. Thanks to setting up babel and other resources, you will likely have modules configured for your project and the entry will effectively be the first visible tunnel entry point where Webpack will find the rest of the network of tunnels that make up the rabbit warren of your application (I hope you like the metaphor). mode is even simpler, this is which environment your current server, or build is operating under. Options consist of development, production or none, allowing you to set other parameters accordingly for your application seemlessly for working on it or deploying it. none is a safegaurd which will stop you from being able to set quite a few things.
When it comes to the output object, things get slightly trickier but not much. This object is where Webpack puts the build of your application (usually just for the production version). In order to do this it needs a bit more information such as where that location is (usually a new folder called dist or build), plus what to call files and where they will eventually sit at runtime (publicPath).
Onto resolve, where the concepts ramp up a bit more. When you write your code, Webpack is clever enough to figure out what it is looking for if you provide file extensions under this configuration option, together with the paths they live under (under modules). So, effectively if you import a file into your project without one of your declared extensions and Webpack finds code that corrolates with them, it'll process it accordingly. This cleans up your code no end.