Webpack crash course | easy way

[Music] i do understand that webpack is complicated for a beginner because if it would be so much easier all these spas would be giving you instruction to configure the webpack rather giving you a starter project but it's not that much complicated if you actually focus on just learning the webpack and leave all the other building the stuff and everything rest of the things out of the box so in this video we're gonna focus just on the webpack we'll understand what problem it is solving and we'll have a small code walkthrough so that you can configure and can manipulate all the webpack configuration in case you need that hey there everyone hitesh here and in this video we're going to talk about webpack this video is going to be a little bit longer it's sort of a crash course or you can say webpack 101 where we're going to discuss what webpack is and we're also going to code a little bit onto the webpack configuration i'll explain you what are these loaders plugins when to need them how to read the documentation of them and a little bit more onto that so buckle up it's going to be a little bit longer ride the most common problem with the webpack is that when somebody tries to explain the webpack either there is already a pre-built written gigantic code that he's trying to explain or somebody is trying to explain webpack while building some application and we can avoid both of them we can just focus on webpack and all we're going to use in this tutorial is just an array and a console log not even processing anything on the array no insert no delete just a hard coded array and just a console log and you will understand thoroughly what webpack is so first and foremost what is the problem that webpack is trying to solve i can give you a great example and i'm pretty sure many of you can relate with that if you are not that old in the days early days when there was an ajax in case you remember that library it was very famous library there was a common error which all of us have faced that all the time whenever you want to use ajax in your custom coded script that you have written you first need to call the ajax and then after that in the second line we include the script where we have written our custom code and many time accidentally we have called our script first and then loaded the ajax script after that and we have all faced those errors that hey ajax was not able to find and after a whole lot of headache we realized ah that was a really simple fix we just need to call ajax first and then our custom coded script so there are always dependencies in our javascript that first need to be loaded up and then there is a hierarchy which we needs to follow in case we are working with javascript so i hope you can relate me with that example and moving on to that example now imagine if you have five different scripts that need to be loaded up in the particular order now imagine hundred now imagine 500 files and yes i can see that look on your face and also in case you are loading up your custom style sheets into the javascript and your svg files and custom jsx syntax and handlebars then it's another nightmare so there should be a solution of how to load up these files and there should be an easier way to fix this and here comes webpack webpack allows you to just modularize your code as much as you want and as the way you like it to be and finally webpack allows you to just push all of the code into one single file and that file is going to do everything i don't have to worry about when should i load this module first or second place or at a fifteenth place i don't take care of that i also don't worry too much about the import statement or writing the stuff in the modern javascript or the old javascript i don't care about anything of that at all webpack take cares everything for me does it take care everything magically for me most of the things yes but i do get a config file in which i can mention that how things should be sorted up and i can just be relaxed after that whenever you are learning the webpack you are also going to see that apart from input file and an output directory you also need to have a knowledge about plugins and loaders but i'm not going to give you that right at this moment because these things should actually flow just like a waterfall and you'll automatically understand that why we need loaders and plugins in that so rather than discussing of them here let's discuss them on my computer screen so finally let's move on to the code part and i highly recommend to walk along with me in this tutorial you're gonna have so much fun and by the end you'll be almost done with the webpack okay so let's get started with the web pack and of course the first thing is to move on to the webpack gs.org the official website always a good resource to learn more about the docs and we'll be doing that later on i'll leave you there so as you can see all of the javascript files and pngs and jpegs and handlebars are all going into webpack and they are just being created into one single gs file one single css this is a little bit more on the static asset so not to bother too much on that so how do we get started with that the first thing that we are going to need is our friendly vs code and i have created a directory called webpack and in this webpack let's bring it up here i'm going to go ahead and create a new file zero one and i'm gonna just go ahead and drag and drop this one up into my vs code we don't need this anymore so that is good and now let's use the full real estate of the screen so this should be okay and this should be all good okay so now that we have this now apart from vs code we're going to need node.js so i guess that is already installed onto your system and in case node.js is not installed why are you watching this video first you should be watching my javascript series first and then come back here probably later on some day anyways expecting that you have got already this installed the first thing is to just initialize the node project so we're going to simply say npm init to initialize it i'm going to pass on a dash y variable to not answer them one by one and everything is being answered so this creates a simple package.json file for us and we can see that it's pretty nice and easy nothing too much to discuss on that okay so we want to configure a webpack what do we need the first thing that we are going to need is to install webpack but alone webpack is it can work but it's going to give you a whole lot of issues that you'll be struggling around on to the stack overflow quite a lot so it is recommended that you also install the webpack cli and they usually go into the dev dependencies because these are just used for development when they go into production they just are single page applications so one javascript file so let's go ahead and add this one and of course i'm going to fast forward all these installation because nobody wants to watch a bar just filling up so this is all we got okay what is the first thing that we need to do when we are configuring our webpack so in the project root directory wherever the package.json and other basic files are you want to create a new file here and the name of the file is pretty simple we just call it as webpack.config.js and yes in theory you can change the filename as well but you have to deal up with a lot of things so don't do that and what is expected from you is to have this module dot exports in that this is just an object and if you just ask me in theory this is all what you need to get started with webpack but this is not going to serve any purpose at all so the first thing that webpack needs there is a lot of key value fi key value pairs that you need to add up here things like what should be the entry point of my project where should i throw up all the things after combining them together is it a production mode is it a dev mode all the things that you can actually give to that so let's start with the basic one there is a first thing that we have to add is an entry again key value pair so i'm going to go ahead and say that i will have an app directory and inside that i'll have an index.js which is going to be my main file or an entry point of all that now you don't need to say all the time dot slash app or index.js you can just say that hey everything is going to be thrown right into index.js or app.js whatever that is you get the idea this is the first thing that we have to do and that's basically mentioning your entry point we're going to come on to the output file as well but they're going to be couple of things that usually somebody is going to ask you that on to the part okay so let's move up here and let's see what else you are going to do so let's just say your project is going to need some of the styling so style sheets are going to be there you are also going to need some svgs to be included very common thing and a little bit more to that so let's start one by one so in here i'm going to say that is there any svg package for that and i'm going to give you a little bit cheat sheet here so this one is known as svg inline inline loader come on there we go the first one svg inline loader so i don't know how to use this one so i'm going to go ahead and refer the docks of that so the dock says first you need to say npm install svg in line odors in inline loader and then we have to say save as dev okay no big deal we can go ahead and do that so i'm going to go ahead and switch on to this one clean my screen so that you can see it paste it up here and let's install this okay so this is perfectly installed but obviously it needs a configuration as well so let's go up here and see that how we can configure it now this is the point where the documentation can be a little bit kind of deceiving so we can see that there is an object and in the object we see the test and we see that the loader is svg inline loader now this svg loader is not telling you exactly where to put this this simply says that hey simply add configuration to object module dot loader and just do this i'm going to tell you where you can find the better documentation of this but in the meantime we are going to just copy this and i'm going to do it for you and will tell you so whenever there are new things or extra things which are required in the webpack to be done these are just basic things like loading style sheets or loading svgs these are known as loaders in the webpack and there are two things you're going to see the loaders and the plugins as well or i thought i should actually explain it first so first loaders the job of the loaders is to simply work into the things while things are getting loaded so before that final one single output js is being created whatever the configuration you need to do before that like loading css and svg that is being done into the loaders and whatever the more configuration you need to do after that the output final output js is being created that all is done in the plugins again no need to bother too much of that but i'm going to tell you all of that okay so first entry point is being done then we go ahead and simply say that we are going to have a module this module is an object and inside that we have some rules so what are these rules these rules are actually an array and this array consists of a whole lot of object the first object we're going to face up is this one this simply says that hey whenever you see any svg since javascript cannot load svgs directly we are going to use somebody else's written code on a module known as svg inline loader and that's all you have to do you can just simply go ahead and just save it and all done so now you can actually directly say import svg from blah blah blah svg and you'll be all done here now you also want to include the style sheets into your javascript so how we're going to do that let's go ahead and find something for that as well let's go npm here and we're going to find a similar package for the style sheet as well so let's go ahead and search for that as well so this is known as css loader again most of the loaders are actually called as dash loaders and plugins we don't call them anything come on load this up okay so this one is very interesting first thing you're going to notice that the documentation is much more clearer now it says module and then we have rules and rules is an array which has this object so this one is actually a little bit better but there is again a small caveat here this says hey you're going to say that css loader is up here but i'm also being dependent on the style loaded as well what both of them are doing up here and why do we need both of them the css loader first and most important thing you need to see this very clearly that these are all loaded up from the right so the css loader is going to be loaded up first and after that the style loader is going to be loaded up next and if you're going to scroll a little bit more you're going to see that they also say that you can also inject handlebar loaders and stuff so again first this guy is going to get loaded then second this guy is going to get loaded and finally the handlebars are going to get loaded in case you need that so coming up on to that why do we need both of them you are going to technically need both of them the css loader allows you to import all the csl css properties into your javascript file but cs this style loader allows you to take those properties or css properties further and inject them into the style sheet of the index index file so both of them are important but we know both of them now so we're going to go ahead and just say hey we are going to need the css loader and we're going to need the style loader so let's go back up here clean the screen and paste this up so this one says hey i'm going to need css loaders and i'm gonna need a style loader i wish they could have just added this one mode here let's go ahead and hit enter first okay so both of them are loaded but our configuration is not being done so let's go ahead and move on to the configuration i can just grab this small thing and i can just move back onto file and after this rule or this set of rule i can just inject this so now i have configured that how i'm going to configure svg how i'm going to configure css and in case you need any other extra file now you have practice two of them i'm pretty sure you can go ahead and work on with the third one as well they're pretty simple but there's one more thing you're going to notice that the first thing which is test is always remain same but the second one sometimes it says loader sometimes it says use so which one do you recommend i personally recommend to say use because it brings more consistency and most of the updated module are gonna say use use can be just a single library to load up or it can also be an array of multiple libraries that you can load up so my recommendation is to go for use up here okay what else we gotta do so let's go back and talk a little bit more on to the things one more common thing that you'll be doing since you are using webpack is the babel now with the babble the thing is really simple you want to write modern javascript with those arrow functions and everything but still you want to make sure that your file actually or your application loads up nicely in the little bit older browser that doesn't support all these modern and advanced features that you're learning in javascript so for that babel is kind of a requirement and how do you configure babel it's a debate it's a lot of debate up coming up here so why is that let me show you on that so what we're going to do is we are going to load babel as well again easy way to find them up is a babel dash loader so again loaders have a loader prefix usually okay this is the one we are looking up for babble loader and you're going to notice a big gigantic lengthy command just up here it says npm install dash d of course for dev dependencies and it says a bubble loader babel core babble preset env pack again i recommend is don't install anything that you don't need if you want to set up some environment variable look for the loader that can set up all these environment variables for you and there's a lot that you can do up here so in this one we are going to just load babel loader and we are going to do a configuration a little bit by ourselves so that we can explore a little bit more onto the code part so first let's clean up the screen and we are going to just say i need babel loader so we're going to go ahead and say hey give me just a simple babble loader let's hit enter okay so babel loaded is up here so next thing we need to do a configuration for that so let's go ahead and write our very first code up here so we're going to say that hey i'm going to go ahead and first say test in the test you basically write uh your regex up here so in case you are not much familiar with the regex that's okay as well all i'm going to say in this regex is that if you find any js file just make sure you are handling that through the babel loader but not only that i'm going to say that i don't want to find any js i want to find a group of js so i'm going to go ahead and wrap this up and again to just finish it off i'm going to put a dollar again probably some another day we're going to talk more on to javascript these regex but not up here just the basics one here okay so that is up and how we are going to use that we are going to use that into loader so we are going to say babel dash loader okay so written you have written a little bit of the javascript a little bit of ajax as not ajax regex actually and that's pretty much it okay so we have got three things being done we are loading up svgs style sheets and we are also able to write modern javascript and it will be automatically compiled down into basic javascript okay this is all done let's move a little bit more the next challenge in front of us is really simple we simply want to have an output file as well so what we're going to do i'm pretty sure that you now have understood the concept of loader so i can just minimize it and you know that how the entry point is working you know how the module and rules are working and i'm pretty sure you can install more loaders as well the next thing to worry about is how the output is going to work on so let's go ahead and have an output output actually is an object and what are the other things that are required in this one the first thing is actually the path so we have to mention the path we are going to do that in a second and the command don't do this okay and the next thing that is required is file name now file name is really simple whatever you want to call this one usually you're going to find that people call this as bundle.js but nobody's topping you to call this as superman.js so feel free to do that now in the path you're going to notice that moto most of this uh bundlers actually import another core module which is part so we're going to simply say const path and that is going to be required you don't need to install it this comes up directly as as soon as you're using node and there we go path okay why we are using this do we really need it no you don't need it but it's going to make your life a little bit easier so what this path is going to do is we do something like this we simply say path dot resolve and it takes two parameters the first one is actually underscore underscore name so get your current directory name and then inside that separated by comma we're going to go into dist this is a very common scenario that you're going to see is it required no you can just say that i need my final file to be in the same directory so you don't uh just give any path name or you just say dot slash and that's going to work fine but this is a more common practice hence i'm showing it to you okay so this is all done now you know that that how the final file is going to be created okay moving on just think a little bit you are creating five different files and that file is bundled up into final bundle.js now somebody needs to inject that file into your index.html as well surely you can do it manually but there are plugins for that so loaders are something which do everything before the final compilation is being done but these plugins are something which does things afterwards for you and one of the very common plugin is the html injection plugin of the javascript so let's install and see the documentation as well and just like loaders uh these plugins actually are prefixed by the plugins so it's pretty common for them as well so html uh web pack plugin yup that's the one so how do we why is hz no i don't need that i need this one okay so somehow i was not able to find that into npm gs so i went on to google wrote the simply html webpack plugin click on that up here and this is going to show us better documentation and stuff so again first thing is html uh simply npm install html webpack plugin of course in this dev mode and then here are some basic usage up here so let's go ahead and follow this this is like two zoomed this is this is more visible to me now okay i like big fonts what can i do so copy this let's move up here on to code file and again just like always clean the screen paste it up and let's install it okay installation done and the configuration part is one of the most easiest one and you are going to absolutely love it so notice here it says that first you have to actually uh require it once you have installed it and once you are done with that all you have to say is that we are working with the plugins so go ahead and grab this up so again nothing much to do let's go ahead and grab this first one up here move up here go to the very top of course after the path i'm going to import that and there we go don't worry if you are importing path first and all of that it's going to be same and then after the plug-in we just have to say that hey just do this so go ahead and work on with that so after the output we're going to just have the plugin and there we go okay so this is the well the most easiest thing that you're going to have what this one is going to do this html webpack plugin is going to say that hey i'm going to generate an index.html for you and not only just that file i'm going to also inject i'm going to look up here and i'm going to say what is the file name and the path where you are producing your final output i'm going to take this bundle.js and we'll inject that into an index.html how cool is that so easy okay let's go ahead and save this up okay now moving on to one more thing which you are also going to configure with your webpack is the dev servers so this is a really really common one so let me show you that up as well so up let's come up here and this one is going to be webpack dev server and there are a couple of issues as well that are running around so i'm going to address you in that one as well you can find them on stack overflow but this is very common everybody face them every day okay so this is how you actually grab this so what this is going to do there is a dev server we all are familiar with that so we don't want to keep on running the file again and again we don't want to stop it and run the server again we want to have a facility which can i can simply focus on writing the code as soon as i save this it recompiles and do all the operations again for me yes that's exactly this one is for you so we're going to go ahead and grab this one up here so let's go ahead and copy that and move up here clean the screen paste it up and let's install okay so now that is installed and the good thing about that we don't do any webpack configuration for this dev server or this webpack dev server the configurations are done into package.json file we're going to do that but there's one last thing i want to mention that that if you're configuring your webpack you're going to see that there is one more option which is absolutely common in fact it is always there which is known as mode so there are two modes up here the first one is actually production that you see quite commonly or there is another which is a development or dev mode what's the difference between them the development is much more forgiving while the production is much more strict if you want that all of your files are compressed and all the extra spacing and everything is being removed in the final version of your file we prefer the production it also minifies a whole lot of things as well but what you're going to notice is nobody sees development or production directly here everybody just uses this simple syntax in which we say that we're going to define an environment variable we're going to call this one as node e and v or maybe other different name and then we're going to simply say that if it is defined as a production then go ahead go ahead and use production come on production or else we are going to use the development again there can be changes in this because some says that hey if it is development use development otherwise it's production so you get the idea it's just a simple if and else now some people directly write production and development i don't have any problem with that it's just up to your use case okay so this is the basic webpack configuration that you do do and i highly highly recommend to check out more onto the webpack documentation they have a whole lot of things being defined for every single use case scenario that you are thinking of there is something there so you can actually go ahead and have a look on this after this video moving on let's do the final configuration of our package.json as well so in the package.json you're going to notice that our dev dependencies are here but here are a few scripts that you can run so instead of installing the webpack and doing the entire long path from the node modules we can actually short that and make our life a little bit easier so what we're going to do is we're going to simply say that i do have a start script and how does that start script is going to work it's going to call webpack and this will automatically look into the node module folder and we'll find webpack for you so the need to define entire path and we're going to simply say ah there's a little bit more i wanted to show you first so if we go on to this webpack you're going to notice that they say you can use it by saying a node module just like this or you can just simply say start dev or whatever the command you want to use and they say webex webpack dav serve and this actually gives a little bit of issues so you should be aware of that so in the start script we're going to simply say like this this is going to give us a little bit of issues we're going to fix that and there is another one we can say that build build is going to give things into production so what we're going to do is we're going to simply say just webpack here okay but there is one more thing we have to worry about which is our environment variable so we're going to just define them here node e and v and we are going to say that i am mentioning that this one is for let's go for production and make sure you put a space there as well okay this one is going to give us an error in the code this one is going to work absolutely fine so let's go ahead and save this now comes up all the configuration is done let's see the webpack that what it is expecting the entry point is in the app index.js so let's go ahead and do that create a folder let's call this one as app and inside this app i'm going to create a new file let's call this one as index dot js another index file we're having simple my array and this area is having a few cities up here so i'm gonna start with my favorite city where i live and i'm gonna go ahead and start with one more and there we go i think that should be enough for now okay and after that i'm going to go ahead and do a simple console log of this my array there's nothing too much on this javascript file just simple basic am i doing any typo nope okay so what should happen now when i run npm start it's going to give us an error so we're going to take care of that later on but when i run npm run build this is going to run my web pack this webpack will go into webpack configuration and we'll see okay so this is your entry point so all of the code that you're retaining writing somehow actually goes back into index.js and if you use any of the svg file i'll handle that if i use any css file it's going to handle that if you write any modern javascript i'm going to handle that this way and i'm going to throw up all of your files finally bundling them together into bundle.js and since you are using html webpack plugin as well i'll create an index.file as well and inject that bundle.js for you in that file and you are also defining your production mode so i'm going to minify your code or not minify your code based on your preferences a lot we have done here okay so let's go ahead and run this one so first what is the command that we want to run here look at up here this one is npm run and we want to use build first so we're going to hit enter and now everything is being running up and we have got some of the nvm looks like i got some of the spelling issues let me quickly see that i'm pretty sure most of you already caught me while i was writing this so this is actually file name and in case you have got this one it's it was pretty mentioned up here so configuration output read your errors that's the only way to resolve this so hopefully let's resume what we were doing so we were doing is we were trying to just run a build command here and the production is being built and we can see that some things are being generated for us so this is the distribution folder and we got this bundle.js and it has just got this console log and jaipur delhi paris and all of that is coming up in the index.html if i just uh go like this we can see that our script is also being loaded in this index so this is all something very similar to the javascript but let us do a little bit more of this one up here so apart from this we are going to go ahead and unnecessarily do some module dot exports of my array i know this is not necessary uh but okay not module.export actually we are going to go ahead and say export default my array okay this was not necessary but wanted to show you something up here so that you understand a little bit more of it so we're going to run npm run build again and this is going to generate all of these files and now let's see into bundle.js and now you can see that since module.export is a bit more of a modern syntax that needs to be converted down so that is what it has done and it's going to keep on doing that now comes up on to the error part which i know is going to come up so we have been running npm run build now let's run what happens with the continuous command that we have configured so npm start so npm run start and we're going to hit enter and this is giving a whole lot of people error and that's why there is a lot of thread in the stack overflow as well what they ask you to do now is instead of going with the documentation of webpack devserve just go for webpack serve and that should fix the error in most cases but again let me know if you are having another fix so npm run start and then it's keep on running the things and it's going to keep on compiling but the interesting thing is you're not going to see much into the bundle.js because it's keep things into the cache and until unless you put the things into build or production it doesn't yield that output in the file so it's going to keep on refreshing the things you're going to see all the updated things so nothing to be worried and you don't have to keep on restarting this stuff so there we go that's basics of the webpack and i'm going to throw this entire file onto my github repo as well so that in case some of you wanted to check it out and play more along with that you can check that up and i'm going to link that in the description section and that's pretty much it i hope you have enjoyed this video in case you have enjoyed it uh do let me know on my instagram or everything in case you can also consider hitting the subscribe button as well or check out my other some courses at learn code online your support really helps a lot in building a lot of such tutorials so thank you so much for keep watching them and keep enjoying them i'm gonna surely catch you up in the next video

Channel: Hitesh Choudhary

Views: 16,847

Rating: 4.946281 out of 5

Keywords: Programming, LearnCodeOnline, python, javascript, webpack, crash course, learn webpack, coding, learn coding

Id: yiwSVeHYosQ

Length: 32min 7sec (1927 seconds)

Published: Sun Apr 18 2021