Webpack tutorial: Create a config from scratch

[Music] look at this bad boy i was gifted this microphone the shure sm7b by my buddy sadek who is the ceo of prismic prismic is a headless cms that i love to use and if i like something i will use it and share stuff about that so i made a bunch of youtube videos and um i got to talking with sadek and turns out we share a passion for good headless cmss but also for audio gear video stuff interviewing a whole bunch and then out of the blue this bad boy showed up sadek thank you so much you cannot believe how excited i am that i actually have the microphone of microphones the one that i wanted so thanks again my friend um [Music] i don't even know what to say how does this kind of thing happen freaking amazing all right let's get into it for this video so lately um on the twitters and all around me i've been seeing more and more questions about webpack yes still about webpack you would think webpack is such commonplace that everybody knows how to use it but actually that's just not true so based on those questions i thought why don't they give you like a one minute overview of the basis of webpack and then we're just gonna go and type stuff in and actually make a webpack config from scratch and so you can literally type along and we will be building a webpack config that will get you started we won't go too crazy deep but at least now you will know how to do it so without further ado let's get into it and let's start with a quick overview [Music] all right let's do a short intro of what webpack actually is it's pure magic magic you hear that new mic nice no anyways actually it's not that magical it's just awesome right so it's a static module blender for modern apps and it is not that easy to configure but actually when you dive in it's not that bad so let's talk about what we used to have and why webpack is there now and what it does so we used to have assets in your source as it's on your website then we realized actually that's not that fast because of http 1.1 it was pretty slow with multiple connections so we started to use php and yui compressor to concatenate files to have less calls to the server and just have bundle them together basically and once we started to get the reacts and the vgs and stuff the big ones this wasn't really working anymore we needed something smarter enter webpack so webpack basically generates a dependency graph of all the stuff you need and based on that information it can do smart stuff and output highly optimized assets for your web app so let's talk about its core concepts because we'll be using those in the code later on so it has an entry so the entry index file your main application file then the output which is where do we write the output bundles to that webpack has then it has loaders so a loader actually specifies that webpack understands this type of file do this with it right and then we have plugins and plugins can either transform what webpack does to the files that it loads and it also has some other fun stuff let's talk about those other things right so we have a webpack development server that allows you to locally develop more it's much easier to use and then it has a development and production mode so in development mode it well uses this webpack dev server but it also has a watcher and in production mode it does highly optimized stuff like chunking bundles so basically chunked bundles is a fancy word for splitting up your output into smaller bundles so you can cache certain things hard that you don't actually use all the time or change and then more changeable things can actually be split off so it's better for the user in the end for performance we'll talk about that more in a bit and then we have eliases which is really nice because when you're importing files and you have to type a really long path all the time it gets a bit annoying and error prone and this allies help you with that and then like i said there's the watcher and the watcher watches all your files and then when you hit save it rebundles everything so that's really handy so this was a super super quick overview of what webpack is and what it does and all the stuff it has so let's dive in and actually code something all right are you ready for some code so we're going to be starting off really simple so let's open the webpack.config.js i have installed webpack cli and webpack with npm so i already did a little bit to show you the beginning so beware install that stuff so in this file you will see the entry and the output as we discussed before in the intro so the entry is basically where you import all the files that you need in your application so webpack can create this dependency graph then we have the output so we have the file name bundle because we tend to name those files bundles and then you say this is the path where you have to save it so the dist folder let's have a look at that index.js right where everything comes in so webpack can do stuff with it so in that index is also when you look at this please don't use this live this is just for an example so i'm importing low dash so beware there's this import here right and then that import is used by webpack to create its graph of dependencies so i'm using low dash for a ridiculous thing but it's just to show you that you can use it in the function i actually create a div and in that div i'm using low dash join to join those two strings together with a space between and then i return the element and then i append it to our body this is really ridiculously simple you would never do this but again this is for example purposes so let's run webpack and see what it does with this thing so to be able to run it easily i actually added a little script in npm like npm script called webpack and it finds the configuration itself so npm run build so we just got a little warning because there's literally no configuration in here so it it says i'm doing this fallback blah blah blah let's not worry about that so in our dist folder you now actually have bundle js and for the people with a keen eye i already had a battle.js in there because of a previous run normally it would be empty and now this is added so there's a bit of webpack boilerplate here but there's also low dash and the code i just wrote and to be able to actually see what this thing does we have to go into a browser and see hey does it actually append something to the dom so for now i added this index.html file in the dist folder this is not really a best practice but we don't have any settings yet there's nothing there to help us to do this so for now it's hard coded we will remove it later on let's just run it let's go into the dist folder and run an http server so this http server is just an npm package that i have globally installed to quickly run a server it's nothing to do with webpack it's just so now i can just do this and actually open this tab and there it is hello webpack it worked so this clearly is a very simple example right but let's dive in and do a little bit more to actually show you what else webpack is capable of all right let's get cracking on the fun stuff so first we need to add some styling right so right now webpack only knows about js files so we have to make sure that it understands what css files are and to do this you have to add a loader so you have to install the css loader and the style loader i already did this but for you go ahead and install those and basically what we have to do is tell webpack when there's an import of a certain type in this case css file load them through these loaders and then bundle them bundle the files do something with it so to do that we actually extend webpack by saying module rules and then there's an array of rules for webpack to understand so i'm just going to copy paste this because i'm bad at typing so basically now we're safe i quickly typed it by hitting control v and basically it tests for files that have a css extension and it uses the style loader and the css loader so you can actually have multiple loaders that do stuff so if we wanted to have an scss file like a sas file or a last file you can also query for sas files and then add the sas loader first then the style then the css so that way it becomes really strong system so now that we told okay there are css files let's make a style like a css file so let's call it styles.s css and make a class called hello and then we color it red okay so now we have a stylesheet that has a hello class with a red color okay so then we have to go to our index.js and oh i already had it i'm sorry basically what i'm doing here is i'm importing styles.css and which it just it just looks at the source file at the source folder right um so when i import this the only thing i have to do is make sure that this thing gets the class hello so element.classlist.ad hello so now we added a hello class to the element hello supposed to be red and we imported styles here and based on the fact that we test for css files here i'm going to be assuming that webpack now understands that css file and bundles it for us so here we go let's go to the oh let's first run it npm oh npm run build run run run it could not find it but why it couldn't resolve it okay ah i actually made a very typical mistake because i tend to use sas so i actually made it the sas file but of course it's a css file let's run that again my mistake okay so it still gives us the configuration warning because we didn't add a mode yet we'll do that later so now that bundle file looks the same it just got a bit bigger i'm assuming so let's go into this folder and do this http server thing again and then load it and webpack is now read so this was relatively simple right so we just added this red color here but we also have images so let's just add an image and this is going to be one of my copy paste things again because again i'm very bad at typing so now we're going to say okay there's actually another rule so when you see a png svg jpeg gif or whatever you want to type here use the file loader and so when you look at my package.json there is there the file loader so i installed that previously so basically now what you can do in that index file we can actually import an image and then use that image somewhere so when you check my source folder a keen eye can see there is my logo here right so why don't we import [Music] my icon so import icon from oh my icon dot png so now that we have our icon we can actually create a new image so let's go and say const my icon is new image so we're basically creating html now with javascript which you might not want to do yourself but this is a nice example right so my i on dot source is that icon that we just imported and then the only thing we have to do is to add that icon to the element we already created element dot append child and then we call that my icon so now we have imported the icon we created a new icon and then there's a source that we just imported and then we added that to the element we're already drawing then webpack knows about it and let's see so npm run build so now we're building it let's have a look at what just happened to the dist folder npm or npm sorry webpack just found this icon and it gave it a fancy name and it just added it to the bundle so let's look at how it works running the http server again and let's open it and i have no oh there it is sorry i just had to hard refresh it so there's hello webpack and the image so let's have a quick inspect ah there it is so it just found my image so that is actually really easy right there are easier ways potentially to to add this but this is this is the the best approach for now um there's one more thing i want to show you for those loaders because loaders are actually really smart and strong and what we actually want to do is right now it loads normal js right so it's just xmas script five but we want es6 and fancy stuff so what you can do is actually find those js files and then run them through babel so then we have a bubble loader so when you look at the package.json you can see here i have a bible loader and i also have babel core and the normal preset so let's do a copy paste action again and actually get that bubble test in there so when you look at this it looks for js files it excludes node modules because that's potentially a huge folder you don't want to be looking in that and then it loads the babel loader so it uses the babble loader for those js files and then it actually has some fancy presets and options because you might want to add some es7 or other kind of fancy things from babel transpilers you can add them here in the options this is not a video about that but that's how you can see how you can add options um so this will just work so now when we do async await or whatever fancy new stuff we want to do it just works because everything goes through babel and that's it right now for the loaders let's go to the next step and make it even more awesome let's get cracking on the next step what if you wanted an extra entry file that you would then later use in your code let's do that and see how that works so first we're going to have something like console log it.js so we're just going to console.log to do this you're going to have to because we're going to just output one function right so export default function console log it which console dot logs hi i'm in the console whatever right so we have a function that's called console logit that outputs so let's tell webpack about that right so we're just going to add another entry but we're gonna have to name them now i'm just gonna quickly look at my reference here just so i'm not making any mistakes for you so i'm just gonna copy paste this again just to be safe right so now what i did i just made um made them name so i have an app dot bundle later on and console bundle so this is the console log in so now what we'll have to do we're going to make multiple bundles now because there are two entries so what you can do actually is this you have some variables name dot bundle so now with this it will actually take app and console and put it in here so now we're outputting multiple bundles hopefully right so maybe let's have a look at this index.js because we need to be able to also see it so i'm just going to quickly grab again some copy paste there we go so what i just added was we created the button and the inner html says click me and check to console and then when we actually click it fires that console log it function but i just realized i don't think we've actually imported that okay so import let's just copy this that's easier there we go from there's the file okay so now we imported this um we could also have just kept it into one bundle but i wanted to show you what it does for two bundles so right now when we run this you will see that there will be multiple files in the disk folder let's let's do that npm run build here we go takes a bit longer okay and now what you see is that there's actually a console bundle and an app bundle what you can also see is that the old stuff wasn't actually cleaned up we'll get to that later so there's a problem however right now we have this app bundle and the control bundle so what i could actually do is just do app.bundle console.bundle and probably now it works let's just check we have to go into this http server and let's have a look let's just do this hard refresh again is there a button yes but let's open the console of course and when i click it says hi i'm in the console and as always there's a fav icon error but that's just express don't worry about that so when i click it actually worked so it loaded now my two files because of course i just loaded them together obviously this is not that nice right because with webpack what you can also do is give a hash for the url so when you update something it will purge the cache for the end user but that means it's always dynamic those names and that actually makes it really hard and for that we actually have a nice solution so let me just open up the editor again and we don't want to be doing this right that's not great so what you can do in webpack is to actually install something for that just go back to our route here what you can do is actually use the html webpack plugin which kind of looks at what comes out and injects the right stuff into your html file so if you look at the package.json there it is there it is html webpack plugin so i have already installed it but you should also now and so now what we can do in our webpack is actually create a plugins thing so plugins is so a plugin is basically a new constructor of that html webpack plugin and i also have to load it in of course so i'm loading the webpack plugin and then basically what you do now is from when it gets an entry it uses the loader so it grabs a file and then it looks at the plugins of what do i do with these files and so those plugins help you with that so in this case i'm guessing this should already be enough so let's have a look so now it actually has a bit of a different outcome so let's have a look at what that index looks like now so now webpack actually created this for us and well it just did the names itself so it's basically the same result but now it automatically does it so whatever we do to those names if we make it app1 and we run it let's run it and then we look at the index and when we scroll to the side you will see there's app one here so this is really useful because later on um you might want to do dynamic imports you want to prefetch some stuff you can want to do a whole bunch of stuff and then this just helped you with that so now you don't have to maintain your own index file anymore but let's have a look at that deals folder that's pretty disgusting like we have our app one our app all that stuff that we don't use anymore so for that we have something we call the webpack clean plugin so if you look at the package json there it is clean webpack plugin so let's add that so every time it runs runs a bundle for you it cleans up the stuff that was there before so i'm just going to copy paste that again so i'm using this so the only thing we need to do now is actually first go oops new that was wrong where are we here we are so now it first cleans up and then it builds so let's run it you see now we only have what we want all right now that we have the basics in play we kind of have to look into the quality of life kind of things like the developer experience because you want to be developing and actually have the code automatically update in your browser when you type stuff like that right so i'm just going to paste a bunch of stuff that i have in my my clipboard that helps you with that so have a look so we set the mode to development which basically allows you to do much easier debugging and stuff like that and then when you put the mode to production it will actually highly optimize your assets so based on that development status we are in we can also do watch is true which basically says we're adding a watcher on the all the files that you touch so when you touch your file it can recompile and update the browser and then i'm adding a dev tool the inline source map which basically helps you to make source maps of the files of this your source to translate whatever bundle webpack created so if you make a little mistake it will be able to find the mistake and tell you look at that file because that's where it goes wrong and then we have the dev server and this thing is really really nice so basically the dev server is a node server that is running that looks at your webpack stuff and then shows it on a web server so we don't have to go into slash dist slash http server and then build first like none of that is needed so let's have a look at let's save first of course so let's have a look at the package.json because there you can see i installed the html oh the webpack dev server so you'll have to do that and then the only thing i need to do is add a line to my package.json because now when i hit build it just webpacks it doesn't do anything else but we actually want it to run it through the dev server which actually is this thing here i'm just copy pasting for you so when i do now npm start it will actually start with the webpack dev server um because it's running continuously and i'm going to hit save um we actually have this plugin here right that cleans up everything we don't really want that now because we don't want this index file to be gone every time because that would mean a lot of resource so what you can actually add to the clean plugin is the following this clean still webpack assets and we're going to set it to false so we'll keep this in now so it doesn't remove stuff all the time it just updates it and that's going to be much easier for now so we put everything in so let's just type npm start and see what happens okay there we go so now i didn't have to do that manually it just went there and everything works so how about now we change the hello webpack to black text let's see if that works dynamically so we go to my style and we're going to make it black oh and you saw it actually updated it created more the new files and now there it is black let's make it yellow updated it and now it's yellow whoa that's hard to say you get the gist right so um this just made our lives a lot easier um and if you wanted to at one point not be in development mode but go to production mode you can use environment variables for that and you can even just do it like this i think you can even do this production if you can type but that's not for now that's for another video so now we have a development setup and this actually just helped us it it's so much nicer now um done for this chapter on to the next where we do much more advanced stuff let's do it all right i want to show you one more thing something that's a bit more complicated but it really really helps and what i want to show you is actually smart code splitting so i i don't want to go all the way into it because this is a long video right we've done a whole bunch of stuff and honestly on that optimizations part we could do a whole video we could do a whole conference talk like there's so much depth here we're just going to stay on the surface and show you a quick thing that will really help so first things first to be able to show it i want to actually change that our console.log function so it also uses low dash because when this also uses low dash we now have two bundles that use low dash but you don't want to have one big thing that you build that both include low dash because that's like double the amount so let's first go to let's see yes i still have it in my my my history so basically here we have now it uses the join function of low dash to create a script string here very simple stuff so now we have two bundles that actually use low dash right so our index uses low dash and our console uses low dash so to be able to make webpack smart and extract low dash and put it into one dependency you kind of only have to do this you just add into the optimization you can split chunks to all honestly there are so many things here i'm not gonna dive in now but this little trick actually makes it super smart and so if you now do npm start it will build everything opens the browser okay stuff still works we know but what i want to show you is the dist folder because now oh when i do this there's no dist folder let's just do mpn run build because when you do npm start and uses the web the web server what it actually does it puts everything in memory so it's super nice but then you cannot see your dist folder now we can so now we have an app bundle a console bundle and a fenders bundle so now those three are actually smaller than the two we had previously that both had the low dash inside of it so i'm going to leave it at this i don't want to go much deeper because there's there's just so much here to explore this video should have given you a great base start if you now want to do let's say fuji s or react just add the loader for it look at like whatever plugin you need and run with it it's not that hard anymore that you know the basics so thank you for watching and i'll see you the next time