--- title: "Webpack basics and core concepts" description: "Ever wanted to know how Webpack works? This video explains its core concepts. I decided to do this because many people think Webpack is like a unicorn that uses rainbows and magic to do its job. But actually, Webpack is not that hard to understand once you have an overview of its feature set." date: "2020-02-06T10:33:36.000Z" url: "https://timbenniks.dev/videos/tim/107-azqrjdqa_d8" youtube_url: "https://www.youtube.com/watch?v=AZqRjdqa_D8" playlist: "tim" image: "https://i.ytimg.com/vi/AZqRjdqa_D8/maxresdefault.jpg" tags: ["composable-architecture", "performance", "frontend", "developer-experience"] --- # Webpack basics and core concepts Ever wanted to know how Webpack works? This video explains its core concepts. I decided to do this because many people think Webpack is like a unicorn that uses rainbows and magic to do its job. But actually, Webpack is not that hard to understand once you have an overview of its feature set. Watch on YouTube: https://www.youtube.com/watch?v=AZqRjdqa_D8 ## Transcript last year at a conference I attended a talk from one of the core team members of webpack and at one point in his talk he asked who here uses and everybody raised their hands and then he asked but who here actually understands and then almost nobody raised their hands so it's quite telling for a tool that everybody uses because it's great but they don't really know how it works though it seems like too many people is kind of a unicorn that uses magic and rainbows to do its job and then to others that use those super fancy CLI tools to scaffold their projects they might not even know what it does or if it exists at all because those fancy CLI tools are kind of zero config they are amazing don't get me wrong I use them myself but if you understand why back you can use it to your advantage and you can actually architect your application better and get much better performance out of it so this video will go over the basics of webpack go over its core concept so you can start rolling your own are you ready let's roll that intro all right how webpack works as you can see I'm taking a slightly different approach to the video today I'm using some slides so it can show you information in an easier way okay let's get to it how does web pack work do a lot of people it's this pure magic but actually if you look into it it's not that magical it does amazing things but it's quite simple actually web pack is a static module bundler for modern JavaScript apps what this means is you take a bunch of modules you put them in webpack it does it's magic we'll discuss what that is and then it outputs bundles and those bundles are less files than what you put in those bundles are optimized that's all it does of course it does more but we'll go over the extras of what it does on top of that later on but before we dive in we need to actually check what did we have before when we still had Steve Ballmer yelling developers with sweat look at them is look at this guy anyways so what we used to have is this so we had static assets and then so this is in development and then we went to production and we had the same these were simple websites we used to build I am old enough to remember that we used tables and spacer cells and images to build our stuff we didn't have that many static assets back in the day but then as time went on we needed more because we are doing more component based design so we had JavaScript CSS and images for example for one component and a bit of backing code and then you started to get a whole bunch of smaller J's files and that actually was too slow because all those HTTP calls and later on HTTP calls we're just too slow for the browser so we had to concatenate those files and that's when we got this we had some PHP magic and I was lucky enough to work with great back-end developers that had this affinity for front-end so they're like yes let's try to optimize this so what we did together is like I said this is what I want how do we get there and it needs to be super simple so they build a script and there are many of those out there but basically what we did is they took a bunch of files and you could give the file paths in the query parameter to the PHP script and it which is grab the file from the server and put them all together in one file that became one J's file and over time we started to do that with CSS but we might be sometimes even optimize the JPEGs because we had this PHP language right and then this came out Yui compressor um a lot of youngsters will not know what this is but you're not missing much but this was back in the day what we used because it was able to compress JavaScript and CSS so as far as I remember it was able to remove all the spaces and really compress your scripts or styles and it would and I think it might even also change your variable names to smaller names like from from ten letters to one because we didn't have to read it anymore it was compiled but this was like among a couple of others was the first effort to actually try to optimize stuff so then after this a lot of other tools came I won't go into them now but we had stuff like grunt and gulp and browser refinery were all kind of around this stuff and they were not all doing the same thing but it in the end combining those tools would get you this concatenated assets right so now we have this look at the magic of a web pack here the biggest difference is we actually have this part here now but basically we also had this with browserify but web pack just does it a bit better so basically it looks at it creates a dependency graph of this group of files so we have an entry file that says ok I need this few file in this case it's view can be anything and I need jet javascript file and and that javascript file depends on this one in this one and so basically drag pack is able to create this graph of which file depends on what and based on that and you can do smart stuff and that smart stuff you can come you can configure yourself so basically based on that graph it knows what to output and create highly optimized static assets and what it does here you can actually configure if you want so let's have a look at first the basics and then the core concepts of what it actually does what that this nice block of magic what that actually is so first of all any time one file depends on another webpack treats this as a dependency so this can be non code assets like images or phones or SVG files or CSS files or whatever so web pack looks at an entry point builds a dependency graph and takes only the modules your app needs and combines them into bundles so what I mean by only the modules your app needs is if you load a big NPM library but you only use two functions out of the 25 web pack actually realizes hey you only use those two so let me just take those two from that library and put those in the bundle there's no need to do the rest also and this is where web pack truly shines so let's talk about the core concepts with the alien guy yes he's awesome look at that hair so core concepts the entry file so this is the file from which web pack start creating the dependency graph and it's actually very simple you just say entry this is my file so this is the index file of your application and here you can say here I'm declaring all my JavaScript time let's say my few files on my react component and stuff like that but you can also load let's say your CSS here right so this file contains everything you need and then this graph the the dependency graph is built from this okay output so this tells web pack where to store the generated bundles relatively simple right and in web pack four and five the ones that are out now you don't even need to do this you can do it completely without conflict because it has very sensible defaults as long as you use the index GSS in the source folder and you the dist as the output but you can also configure this and there's a lot more to it but we're not gonna go into that in this video so let's get to the fanciness loaders right so webpack understands only JavaScript and Jason out-of-the-box so you need if you can do any sort of other modules or a type of files basically they allow the processing of other files like into useable modules or your app so loaders have to convert configuration properties so one which type of file am i transforming and then to which loader do I use to transform them so in this case you can see each txt file will be loaded using the raw loader and those loaders can do a whole bunch of things and if you have SVG files you might use an SVG loader if you have few GS files or react components you might want to use if you GS loader or the react loader or the Bible of loader so these loaders can do things to those components or to those files that make them into useable modules for the bundling later on okay plugins the plugins extent web packs core capabilities right so in this case this is super handy in this case we have let's say the HTML web pack plug-in this plug-in actually creates an index of HTML file let's see what that are right here so the HTML web pack plug-in creates an HTML file injects the bundle file names up that was short so it basically those bundle file names can be dynamic so this plug-in knows those file names or understands by hooking into the core capabilities of web pack and injects them there are also many other types of plugins right so they can be used for many different things like bundle optimisation like I'm pressing it or doing post CSS stuff or two asset management you can do bundling of files so you can opt in the files they can inject variables into your codebase it's a whole bunch of cool stuff that comes on top that helps you a lot with webpack so you can see it's super flexible right you can do many things okay so mode so the mode can be development production or none and in real life you tend to have just development and production so when its mode is set to production it will highly optimized all the files so it will do compression and a whole bunch of stuff and in development you have more debug tools so this is a good one to know let's talk about the extras because up until now we're back does the same thing as what we had before just way smarter and way more flexible and it's mainly configuration based you don't have to code that much like with golf for example but there's a bunch of extras that they built into the ecosystem that are just awesome so let's get to it cool extra extras the dev server the web Black deaf server is a super cool plugin that actually creates a server for you a note server it can serve your application and that works really well together with hot module reloading which means it serves your file or for your app and when you change the file let's say you change one component or one module it automatically reloads only that module in your bundle life in the server so we can or in your browser so you can just code and you can do this with CSS or any type of bundle and then when web pack is watching that's a property you can turn on we'll see that later when it's on it will hot module reloading directly into the browser so you just see it work so you only need this you don't need more you don't need browser saying stuff like that of course that's cool to have but you don't have to that is a really neat feature then we have tree-shaking we discussed this a little bit I won't go into deep too much but it's able to figure out the stuff you need rather than including everything it only includes the stuff you need so you can highly optimize your bundle and if you understand this well there's a whole bunch of things you can do to make this even more optimized then chunked bundles again very interesting because especially with react applications nowadays they become really big they actually become four or five megabytes for one bundle that is just crazy and nowadays we actually have HTTP to so you can do more parallel downloads just as fast as before with single download again a big subject I won't go into deep now but you can actually do some smartness by chunking your bundle into multiple chunks and still maintain how the dependency work together but you can load files separately and that's and they have a lot of smartness inside work back to do that so it's a bit too detailed to go into now if you're interested I can do another video on all those things separately to actually dive deep but this is a super cool feature that we really need and then it understands all types of JavaScript modules from AMD to commonjs or accumulate mole imports all of that stuff it just understands them so this makes it super flexible and then you can use elias's so sometimes you have a folder structure that's super deep that you have to use every time on every import you can actually make an elias in your configuration for that path so you don't have to type that whole path all the time in all your files so that's super handy as well and then there's the watcher the watcher is actually so it turns said to watch it's true and then webpack just looks at every file that's changing and then does an action based upon that and that's it for this video so i didn't go into too much depth but actually i hoped i managed to actually give you an overview of all of the different features backpack has and also all its core concepts and i've been able to do this in 13 minutes now it's not that much like a conference talk is longer right so i hope this was clear and please try to do this yourself just go into the documentation it's a great documentation and just roll your own well there you have it as you can see it's not that complex if you understand the core concept what goes on in the loaders and in the plugins of course it's more complex and it's amazing but the core concepts are really understandable so now it's up to you to just try and roll your own config and just read the documentation grab some stuff from that others have made and use their cool stuff to actually figure out how you can do this yourself I guarantee you will learn a lot about how to optimize stuff for the web thanks for watching and I'll see you next time