Getting Started With Webpack For Modern Web Development Javascript & Nodejs

Key Takeaways

come on guys oliver doing welcome to bring your video tutorial from my Pinterest a I'm gonna talk about a really important topic as a web developer you probably need to master you probably need to learn before it's too late we are going to actually get into the web pack we're gonna just go and dive right into what is web pack why you should consider using webpack if you haven't already and one web pack is just a such a powerful tool to have or to add into your a project or eat your next project or you or you're currently working project just right now so I'm just gonna go ahead and dive into what back we see why web pack is such an important tool to have to master and to know about and to reuse it right over the box so just gonna go ahead and explain what what is what back first so we have this like really nice slider here so what pack first thinks the question comes up on your hand whenever you heard this word if you haven't or if you're from if you're not actually familiar with it so you're gonna say what is web back so web pack is actually is an asset bundler but takes your web nodejs project so it just works with web no geez without problems projects and bundles it's into a small and minifying yes or C CSS files so it helps with faster up leo's if you have like a really large project or a big application scale application you're just gonna take it apart and just minify they had put it into small a really small javascript file that defines all of your code everything is in there me to find small and ready-made for you compress the pores you can just really really optimize the your time of your application or for your website or your web application or even your never just node.js application it works fine print so an encode protection of course you can just secure give give some security primus is your javascript code also in maps every dependency your project requires and includes it on the final output bundle so let's say your your file have or your project requires some custom font styles some custom images some custom no SVG files so everything's just gonna be bundled taken away and out put it into some directory you you specify or through the configuration the web pack actually provides the API web pack provides so you can just provide us taking an output in to an organized folder so you can just literally use it or what the heck music simultaneously so you don't even need to care about the public folder if you're running a web application so for public water is really important thing to have in your web application Thanks so you don't even need to think about what that is gonna do all the heavy job for you the heavy lifting you're just gonna like to take care of the dirty job take the dependencies out put them in a really organized way and that's it so all you're gonna need to do just like make the application development web pack take care of optimizing it and layering all the required dependencies it basically necessary from modern projects develop and say if you are like thinking about restoring the projects or you can't be working on a project I should really or you should probably consider using webpack nowadays since it's a very very simple thing now with its deep support configuration and be available plug-in on the market you can use it to bundle and compile pretty much anything any yes version any JavaScript version it's x7a es snacks whatever and acquire any file type or third-party dependency your projects pretty much used so any dependence you have in your project third party or facial dependency whatever your web pack pretty much gonna take care of this dependency with no problems you should consider using it on your JavaScript Pro project of course if you haven't already or if you're not thinking about it already so let me just go ahead and show you the way you to configuring real world application using one pack just the basic thing so if you really like the series I could do more add more tutorials on it but just for this with swords gonna me show you the basics and why web pack is such an important thing so is your official website of the web packs or what is the org so us can see if from the main web pages - you can take all of these different things like JPEG PNG images tasks whatever thing it just like a bunch of them and output them in a really really simple and unified files so a publication can very quickly Leo them with no problems and you can just you know skip the hassle of requiring all different files on stuff like this so this is called modern web developer using webpack where there's other libraries that do doesn't very much the same job as web pack but I think or as I personally recommend what that is just the the best thing on the pop mark right now for for each develop pretty much so it really would come and go at this point so we'll just go ahead and see the projects I have Visual Studio code opening here with a brand new project so I'm just gonna walk you through from the start up how to create a project right here so let's say we're gonna have a very small is to use nodejs or even normal web application in your so I'm just gonna go and install the structure so first let's go create a project let me just call it the distribution this distribution folder can take care of it's pretty much the same as a public folder so all of the public file gonna risk they're gonna gonna live pretty much they're like the main application there stuff like this so the website public folder is gonna be the distribution folder gonna create another one in here I'm gonna pull it the SRC the associates gonna pretty much be our interval and applicational in development source files so all the development the source file is gonna live in the S or C so whether in JavaScript whether it's CSS or sass whether whether it's phone smiles like has some our assets custom assets or images like PNG or JPEG whatever so everything's gonna limp on a CS or C can have a file the comic creation of the web backing this file is really important so it's pretty much the the most important thing to have whenever you trying to include or pretty much use webpack women and/or real-world projects so you have to include or create this configuration file so all you need to do it must type in the so webpack dot-com Feng dong geun's typing this one and everything should look pretty much fun but before the govern any further and say it out because I what I can configuring it what we're going to need to do is as you know we're gonna need to NPM like we need to create or initialize NPM with this or analysis project P must be no jsn NPM and vice versa so we should go in and install no Jesus if you haven't already the website is no JSTOR for work obviously some no just org or just type in OGS in Google we're gonna probably just go right there let's consider just or you just go to the download section and everything gonna be fine for you so you can just easily downloading installing it comes free it cannot solve up from no eg SNMP em so you don't need to worry about this so this the exposes have said we didn't need to initialize all repository and initialize your projects the package names just gonna like leave it as that version as this web pack or something an entry points for this one you're gonna be specifying what entry point I'm just gonna say up top genius because they're gonna like you can hold it later on and the test came in gonna be nothing get repository key word I'm just gonna put it back again the author of course means I must obviously at least typed my name with our problems and I mighty of course I'm just gonna say yes yeah here we go I've got a packet of JSON back to JSON means that we have initialized NPM or inner genius projects for you so now as you go ahead and install some dependencies we need to require like the leap what bad thing like the some third-party plugins that we're gonna need to use for bundling all the different things for the JavaScript code the CSS code and all the different things so to go ahead and install this so make sure to run npm install first things first the most important part is to install what pack itself now since web pack version 4 that is two different web pack plugins or different modules of web pack so this is the web pack think this is a general plugin or pretty much in general more though i keep saying it's naming is plug-in pretty much once modules this is the general thing with the January Mitchell installed this CL on the command line interface WebEx so just typing again webpack - the ally and you're gonna have the Acela installed so this is the like most important package to have whatever you try to stop them what pack or any projects or requiring your projects make sure to install both of these because they are the core mode was I'm gonna run what pack can bundle your CSS JavaScript and different files permit you so this is what you need pretty much require from the installation with our thing we're gonna need more different things like the CSS Lyoto so I'm just gonna install this CSS theater of course style your and pretty much you're gonna need sadly order as you obviously know and I'm going to like yeah this is this is all we're gonna need to do gonna need one other thing to like use sass you know a sass and CSS and different things and bundle them we web pack so we need like a specific plugin as I told you before what that is it fool plugins and stuff so you can easily use plugins and stuff this plugins pull the extracts text - web pack plug-in and first plug-in is like a really really bad problem with this so if you try to install like this you're gonna have a really bad problem I don't know if they fix it yet or no no not really yes but to fix it what you're gonna need to do is install the next version of this plug-in so to do that just put ads next and they're just gonna install the latest in development version or pretty much but it just works pretty much fine I have this installed in all my projects and it works pretty much fun so yeah make sure you go ahead and install this yeah I'm really gonna be very much fun from now on so just see but I depend this in here and we're gonna need to wait for the installation to complete any we go after every husband install successful scan see plugins that we're acquiring and yeah now we are ready to start and bring the configuration now as I sold it before the competition is the most important part so make sure to go in and put up wet Bank on TJ yes and it's gonna start configuring it so first things first I'll just go ahead and require the path Morgan the path wall you know like Allah wants to resolve some files we're gonna have on other active files on our projects so we can resolve them obviously put them the computation be telling you that wetbacks taught compiler from this file or to output this file into this particular territory and so on and so forth so we're gonna need the path no gs1 deluso just gonna like one of this one and it's gonna be the path so now we have the path the configuration objects of web backs pretty much is a normal JavaScript objects so all you're gonna need to do is export it as default so you say export multiple and pretty much it's not models of export too much you creating an object so this is it so make sure to export as the US pretty much they think so concern here as the default thankfully much this raiments to say so one of the exports is gonna be the default thing and it's gonna be normal object the first thing I'm gonna need to cover or you need to put in invisible objects is the entry point or from where what pack is going to start compound so it's called entry so the entry point of this entry on sugars you know like it's a file is a JavaScript file pretty much so it tells what pack from where to start compiling so you're gonna need to tell it I'm gonna use the path I'm just gonna say moves old and I'm gonna resolve on file so just go ahead and create a file on here on our projects so it's gonna be the root project so I'm just gonna say up top KS and this is what I want or were what pack or from when I were to go back to stop compile and I read clean like operating everything so this is this turning point about genius I'm just gonna say here we need to give it a relaxed fat rats pride means just kind of just relative to where the web configuration file exists so I'm just gonna say the same directory and up top is the sang of hey I'm gonna need to give it to the mode the mode is pretty much the way it there's like two possible values for this mode the development mode if you're like just dip open your application or solve development gonna help you like debug your application see the problem see the errors in action and there's the other mode in production north purple up the production mode gonna allow you to produce deploy your application to a real word what's herbal to like to show everybody can see it and then you use it much as a real-world application so the production is gonna like have more privacy care security security and then so on and so forth a lot of things I'm just gonna put in people the nozzle you know we all give up an application in here so the first thing you need to put it is in the involvement now the other thing is the output object so it's gonna gonna on objects in this output she's gonna tell each word to output the bundled files so after just taking all the different files from the upload a and started compiling compiled all of them dependency graph and stuff like this you're just gonna like take all of the files I'm gonna find them and put them somewhere on the project you specify for him so first I'm gonna give is the file name of this file I'm just going to say to produce an object j/s again you know you need to distinguish between this one and this one this one's just for developments and we're just going to put this up top chains into the distribution folder so they are completely different things I'm just gonna say the same I think is gonna be the path so where to put this up dot J's file the path is gonna be pretty much you're gonna use the path in here and I'm just gonna say goal so where we want to put it I'm just gonna obviously put it into the formal status distribution folder right here I'm just going to say a fold or at the end in here in order to make sure it's just gonna take a folder yeah this is this is all you're gonna need to do just the power name in the path and everything should pretty much work fine for you so this is the contribution this is the basic thing you need to sell it's the entry point from where to start compiling then the middle of the compiler so I want you to compile and the output now if you really need to use this application with no GS and stuff what you're gonna need to add is another Pro pre-talk or it is called the target properly the target policed just like have two values either web so for a general web application or for node.js so you need to put either node or pretty much the web so I'm just gonna say in here the target is gonna be pretty much now he is or just no like with no no yes or no yes at the end and this is all you're gonna need to do now the other thing can have the resolve property or the result objects result objects is gonna take another prop is called called extensions the extensions is simply an array that you give it the extensions of the file of the source code files that it needs to resolve so what source code files I need to resolve or what it takes and compiles later on so for example you're gonna tell it chance or doctype scripts I don't know if you have other files like dot CPP or don't call it something like this if you have different languages like Ruby and stuff like this but I'm just gonna say in this particular example what is gonna saint-jean stop DSX for reacts and obviously the last thing I'm just gonna save up JSON so whatever you finds this one is just gonna take it and compile it right away so this is for the resolving what extinctions to resolve now the most important part is the model so the module part is gonna tell it how to compile things so let's say you have a JavaScript code in here which is not normal JavaScript polity is using react and using the ESX and ESL of JavaScript so or the s 2015 and es 360 versions so pretty much I'm gonna need to use a specific layout of this JavaScript pill because the normally order of JavaScript doesn't know about that so to tell it you need to use like a custom layout in here like Babel Babel or differently of the Flex transform or like time scribbly order or also touch curly order they are functionally orders all there but you need to usually order for the uniqueness code and it knows how to compile up pretty much it takes all the JavaScript code like the specific how do you have there it takes it compiles it in obviously tells what Mac how to put it eventually on the output file so in this case we're gonna need to add some objects so this model is gonna like simply like he takes rules so it takes rules rules objects this was our array we much know objects is taking a bunch of objects so this objects are test objects telling webpack how to compile specific ones so we have first to test the file we want using a regular expression again if you don't know about real Google special what they are we gonna special you gonna find the below in description food the same with your about trig expression how they work and stuff like this and if you go and check it out or see for knowing more about it so I'm giving to give it the extension that in needs to resolve so how the extension and I told you you're gonna need to go ahead and learn more about review expressions in order to understand what I'm doing in here what I'm basically is telling it is to look for these CSS files so just I'm telling it to go ahead look for CSS files and just grab the CSS files whenever you find those CSS file what it does is just gonna use this layer until I'm right here so let's do do it is gonna be like a third part of the order that we have installed later on if you can quite a remember if I'm just gonna pull up this again as you can see we have a CSS fully order in here that's responsible for yielding CSS files so I'm just gonna call it this one so I'm gonna to use the CSS layout or for building that's one there is more like custom properties depending on the way or do you use and well this is ass basically yes just first test it then you give it a Leo the name Jimmy use and that's it so this is all you're going to need to provide you can add bowls in here if you have like even over test testing for a JavaScript file or something like I don't know you're gonna tell it to test for a J's file if you find the J's file use a custom builder but for now I'm just gonna keep it very very simple as you can see here and obviously there's no rules there is the test in here with the CSS file and this is all you're going to need to worry about us can see it's quite simple what eventually or usually going to happen on normal what that configuration file is a bunch of test objects in here that keeps like testing about CSS files testing about fonts files to seal about imaging is to say about videos on do something you can out that and a little of zoom or other things that you can like eventually tests for so yeah this is us basically this what you promised gonna need to use for a normal web pack that yours can see so you can see it's quite basic for now it's gonna be use it for normal JavaScript and now Jesus told you it's quite basic so movie exporting Explorer this custom comma creation let's go ahead and put something in here under this one I'm just gonna have a console lot hello from what compiler or bundle or something just you know make it simple like to save in this one and just go ahead how now to compile this one how to bundle until what have to stop bundling the praying everything and distribution holders can see right now this tribution all this is emptying has nothing so we want to like produce this and put it into the distribution folder which you know like what give us an up dog is minimal compiled or bundled or file right there so to do that we're just gonna like one what back and yeah so just run this web pack make sure you are actually in the the project directory so you can see what pack basics so this is that where all those files exist so just call me what pack rather and make sure obviously no GS and NPM is installed so what pack Cyprian this one you just going to know try to find that and here girls as you can see now we've got your up top tiers ready-made for you try to open that up you probably not gonna understand any of it so you can see like a bunch of different things that wheel things with a commenter here so you're not gonna understand any of this but just closers can see this is the panel really made for now let's go ahead and try run this using no tears of course copy manages compiler I'm just gonna tell it to go into the distribution of us and up top games see what is going to be happening so I'm here we go with God's hello from what panic bundler so as you can see we've done a really really simple and quite basic example in here just like taking some CSS files just to show you with the rules how it works and how resolving extensions and how to open so this is the main area that you need to focus on for the right now but if you have like on the next video tools you're gonna cover more things how to add more advanced leaders how to layout CSS how to layout sass and stuff like this how to layered with with a different or a custom JavaScript the other like babe own stuff to lay your react scared and stuff like this and then many many other things we're gonna cover on in the next video so it was actually Gospel story Selena doesn't watching hope you all kinds of enjoy today's video tour and hopefully we'll catch you all in the next video to told even webpack series or in the brain you sure it's so thin girls are watching see you in the next one