Webpack Crash Course

hey guys in this video I'm going to give you an introduction to webpack ok which is extremely popular at this time so this is going to be for absolute beginners if you've use webpack in the past then this will basically be a refresher for you guys so there's a ton of stuff to learn especially when you get into the different loaders and plugins and all that but we're going to focus on just the basics okay just to set up webpack to have it convert our dynamic code and modules into static assets all right so let's go ahead and get started now webpack is what's called a module bundler and it takes modules whether that that's a custom file that you created or something that was installed through NPM and it generates static assets to represent those modules ok so then you can take a fully dynamic application and package it all up into static files which you can then upload and deploy to your server ok so you can also extend what web pack can do with plugins loaders which all have their own separate set of configurations all right so let's take a look at some of the properties of a module and what a module basically is you can require any JavaScript file with web pack but when we say module we usually mean a discrete chunk of functionality or chunk of code and it's usually abstract and it delegates functionality to libraries so that we don't really have to understand the complexity of it okay we can just require it and we can use the public API that's exposed it's usually based on a single task or responsibility and more often than not it's reusable whether that's in reusable within that application or within other applications as well all right now there are other modules out there one one example would be browserify so what makes web pack different so web pack uses something called code splitting which allows us to break up our code base into chunks which can be loaded on demand ok this is an opt-in feature you can provide split points in your code if you want another great feature of webpack our loaders so by default web pack can only work with native JavaScript but there's loaders that can be used to transform other resources into JavaScript so we can actually transform CSS into JavaScript and then just require it right in that script another example would be with the react library react uses JSX which is JavaScript syntax extension and web pack has a JSX loader to work with react okay sass is another example we can simply require sass or F CSS files right in the JavaScript alright web pack also has a very clever way to parse just about any third-party library so we can use expressions in dependencies such as this Jade this Jade import right here web pack can also use both AMD and common j/s modules and then it also has a plug-in system you can write your own plugins but that's way beyond the scope of this crash course alright so these are some of the example loaders there's liver literally hundreds of them these are some of the popular ones so there's the CSS and style loader that allows you to just include CSS right in your script we also have sass and less which are CSS pre compilers so we can simply include SAS or SPSS file or or a less file JSX is used for react so we can use that babel is used for a few different things but it's often used so that we can use es6 JavaScript syntax and it will then compile down to es5 so you have full browser compatibility ok coffee it is uses is used for CoffeeScript typescript which is a superset of JavaScript and then we also have loaders for template engines like ejs which is embedded JavaScript also pug which is formally known as Jade and handlebars okay we also have a JSON loader to handle Jason so there's a lot of loaders that you can check out on the documentation so to set up web pack is pretty simple we just want to install it with NPM we can install it globally so that we can run it from anywhere and then there's also a module called web pack dev server which basically just takes all the auto-generated code and just loads it up into the browser on localhost I believe it's port 8080 by default all right so this is a diagram off the documentation and this basically shows you how web pack works so if we look at this one here web pack reads the entry point and analyzes its dependencies also its dependencies dependencies and so on ok so this is what we would have basically have in our source folder so we'd have a main app j/s and then we could simply require in a module such as this cats module and this cats module basically just gives us this array that we can use and then here you can see we're just console logging that array all right so we're able to include JavaScript files within each other just that alone is a reason to use webpack all right and then web pack bundles the entry point and all of its dependencies into a single file in this case it's called app bundle j/s so this is the the file that you would include in your index.html inside of a script tag and it'll take all the modules that you have and just bundle it into that one file ok and you'll have all that functionality you won't need to be running a server or anything like that all right so that's the I guess the very brief summary of web pack now we're going to jump in we're going to install it and I'll show you how to do a few things with it all right guys so we're going to go ahead and dive into web pack ok now I'm using Linux Ubuntu but all the stuff is the same whether you're on Linux or Mac or Windows you will need nodejs installed so make sure you go to node.js org and download it install it and get that set up all right and then once you do that we can install web pack now I'm going to install it globally so that it can be accessed from anywhere so I'm going to go to my terminal and just do an NPM actually I need to sudo because I'm on so pseudo npm install and we want to do the - g4 global and then webpack and that'll get it installed on your system okay while it's doing that I'm going to create a project folder it's going to be in my project sandbox directory and we're going to call this just web pack underscore app okay and then we also want to open that up in the text editor which I'm using atom so I'm going to say add project folder and go to project sandbox and web pack app alright so now web pack is installed next thing we want to do is create a package JSON file which is part of nodejs and it's a manifest file and it holds all the information for the app the dependencies things like that so let's say NPM in it and that will go ahead and generate it actually I don't want to do it here I want to go into web pack app ok and then we'll do NPM in it okay name that's fine fine description I'm just going to say sample web pack app entry point I'm going to put a pas and then we'll just enter through the rest all right so now we have our package JSON file and it should look like this now I want to do our testing in the browser so we're going to create an index.html file for that okay and then in this file we're just going to put our basic tags in I'm just going to say web web pack app and we want to include a file down here which is a script source okay and then this is going to be pointing to a file called bundle dot J s okay that's going to be the final result of the JavaScript when it gets passed through web pack okay but we do need a source file to work with so that's the app.js file so let's create that okay and just for now I'm just going to do let's do an alert colonel just alert hello world okay so we'll save that now this is the source file this is what we want to run through web pack so let's go back to our terminal clear this out and what we're going to do here is say web pack and then the source file which is a BIS and then the the compiled file which is going to be bundled j/s so let's go ahead and run that and this is what it looks like when it's successful if there were errors they'd be shown here in red but now notice that we have a bundled dot J's file and if we look at it it has a ton of code in it this is all web pack stuff you don't have to worry about any of this and you can see the actual console.log that we have in app j s is down at the bottom here I'm sorry not console.log it's an alert all right so remember the index file is pointing to the bundle J s so it's pointing to this file and the app.js file is the one that we do stuff in this is the source file all right so let's go ahead and open up our index page so index.html we're going to open with Chrome and we get an alert that says hello world now for the functionality that we have which is just a simple and alert there's no reason to use webpack okay because we're not doing anything that you need web pack for but if you wanted to let's say import a file into this app J s as a module you need web pack for that if you wanted to add your CSS through the JavaScript web pack can do that if you want to use babel and you want to convert es6 javascript down to es5 you can do that you do need a loader but I'll get into that in a little bit but there's literally hundreds or I don't know even thousands of different things that you can use webpack for alright so let's start off with just requiring modules so I'm going to create another file and I'm going to call this let's call this people dot J s okay and what we want to do is say module dot exports now what what this does is it makes available whatever we put here to the outside okay so for now we're just going to make it a string that says hello world okay so we'll save that and now we should be able to go to app J s and let's take this out this alert and let's just do a require of people dot J s okay we'll save that and let's go ahead and run the web pack command again I can't resolve people J s can let's see oh that's because we need to put a dot slash here telling it at sinister in this folder so let's try that again alright so now it's successful and if we go over and reload we get hello world now that's coming from the people module if I change this to of say hello everyone save now notice if I do it now it's not going to show hello everyone because we didn't run it through web pack so we'll have to just run the web pack again reload and now we get hello everyone ok so now we can import different things into our main app J s file and then once it gets bundled through web pack it gets put into the bundle j s which then is being included in the HTML file ok so hopefully that makes sense now if you don't want to have to keep running that web pack command after you make a change you can actually use it in watch mode so what we can do is say web pack app J s bundle j s and at the end here just tack on - - watch and now you can see that the command prompt is now just sitting here and it's waiting ok so if we make a change let's go into people and let's just add an exclamation here and put and then save and then we'll go and reload and you can see the exclamation mark okay we didn't have to run it again because it's just running in the background watching our files alright so back to people J s right here we're just exporting a string but it doesn't have to be like be a string it can be anything it could be the results or the return of a function so if we wanted to say function get too low and just return let's just say return hello there and then set the exports to just get hello and then we'll save that go back to Abby is and we'll just leave that as is reload and we get hello there it's now getting the result or the return value of that function all right but what we're going to do is create an object okay so I'm actually going to just comment this out I want to leave most of the stuff in the files for you guys so what I'll do is create a person or not persons create people and what that's going to be is an array of people objects so let's say name of John Doe of course and let's say name Steve Smith and say name Carol Williams all right so we have these people because people array and then I'm just going to say module look sportspeople okay so let's save that and then we'll go over to app j/s and let's just leave that and see what happens okay so an alert doesn't work well with objects because it won't show us the data in the object it basically just says it's an object so what I'll do is change this to a console dot log okay and then we'll save that and reload and then let's hit f12 to open up our chrome tools and you'll see that gives us an array with three three items and if we look at those items we have our people okay now usually you won't do this you'll put it in some kind of variable so if we say let's people equals require people je s and then let's consult log people okay that looks a lot better okay but it does the same thing and let's say we want to get an individual person we could say people and get the first one which is in the zero index reload and it gives us that one object which is John Doe if we want to get a specific field like the name we can say dot name and now we get John Doe okay so you can see it's very easy to create a module and import it into or require it into your app J's file alright so up to this point we've created our own file people in and required it in but let's use something else from the node package module directory okay so let's say we want to use jQuery so we'll go over to our command line I'm going to keep that running and then go down here and go into web pack app and then we're going to do an NPM install jQuery and then - - save ok so that installed jQuery through NPM and what we want to do here is just bring it in just like we did with people so we'll say let money sign equals require and let's say jQuery all right and then down here let's do just anything in jQuery so we'll say we want the body and we want to append on to that and let's say we want to append an h1 and then inside here we're just going to concatenate the person's name which is this right here ok so I'll grab that paste that in there and let's go ahead and save that and reload and now it's getting put into the okay so we're using jQuery from the spy lair and it's still it's all going to get compiled into bundle j/s remember that's the only file that this that the index that the HTML is including so no matter what we do it's going to end up in that file so if we look at that it's just basically a bunch of gibberish okay you can see there's our people array and then we have all the jQuery stuff should be down there as well okay but we don't really have to look at this file ever so just for shits and giggles let's go ahead and loop through the names of the people and output them using jQuery just so this file does something all right so we're using each loop so jQuery dot each and then we're going to pass in people which is the array that comes from the people J s file and then we'll do function and that will take in the key and the value and then I'll just grab this right here cut it put it in here and just change the zero to the key which is going to be an integer a number so let's go ahead and save that reload and now it's printing out all the people from the people J s file or module so now what I want to do is introduce to you a loader okay we're going to use the CSS and the style loader so that we can actually require CSS files and styles from our JavaScript so to do this let's first create a new file and we'll call it style dot CSS okay and in that full in that file we're just going to give the body a style and we're going to say background something very prominent let's say red okay so we'll save that now we have this stylesheet so we actually need to install loaders just like we would anything else so we're going to go to our terminal here and we're going to say npm install see what is it CSS - loader and then also style dot Tom's not dot dash loader and then we're going to add this to our dev dependencies so just do - - save - dev and that will install those two loaders okay so now if we look at our package JSON file you'll see we have those loaders right here now we're going to do is go back to app J s and we're going to let's go to the top I guess and let's do require and in here we're going to say exclamation style well actually we want the actual file which is going to be dot slash style dot CSS but that's not going to work because we need to implement the loaders so we can do that right here and we'll say exclamation style and then exclamation CSS and then exclamation okay so that's telling it that we want to use the style loader and the CSS loader and I believe now you have to add dash loader because you didn't have to before but I think you do now and I don't want to get the error so let's do that and let's see what happens if we save and we reload now you can see that we have the red background so that stylesheet is actually being included in our JavaScript all right if we look at the source code here there's no there's no link to any CSS file it's all in this bundle file that web pack created for us okay so hopefully that makes sense now this here doesn't look very nice and there's a way that we can fix this and there's a way we can fix a lot of things actually for instance when we want when we run web pack we have to include app J s and then bundle j s for the output we can actually put all this stuff inside of a config file for web pack so let's go to our application root create a new file and we need to call it web pack dot config dot j s ok and then here we want to do a module dot export and set that to some curly braces and then we want to specify an entry file ok so for us it's going to be dot slash app dot J s ok and then we want an output and the output is actually an object which is going to have a path so for the path I'm just going to say double underscore dur name which will be this current path and then also a file name and for the file name that will be bundle j s ok now when you're using a loader like the CSS style loader we have to define those in this file so right right under output we'll put a comma and then we need to say module which will be another object and then we can do loaders and loaders is going to be an array of objects ok so let's create our first one here now this is going to take an element for test and basically what we're going to put here is an expression so we're going to put forward slash backward slash dot CSS money sign and then forward slash now what this is saying is that this loader is for any file that ends with dot CSS that we that we require all right so we're going to put another parameter here and specify loader and for that we're going to say style - loader and then put an exclamation and we want CSS loader all right so let's go ahead and save that and then let's go back to app KS and get rid of this crap here it's just going to be including the file now since we put in the config file we put the entry and the output then we don't want to include that in the actual web pack command so let me just clear this out and we should now just be able to run webpack okay and that should compile it reload and everything is still good now what I want to do now is I want to structure this in a better way because this is not how you should package your application we have both the source files and the the compiled file in the same level okay so what we'll do is create a folder and we're going to call that source and that's going to be for the source files and that's going to be apt Jaso we'll move that in we're also going to move in there actually no I'm going to do is in the source create another folder called Jas and put a pious and there we also want the people module in there alright and then we're going to create in the source a folder called CSS and we're going to move in style dot CSS into there okay and then what I'm going to do is delete the bundle file because that's going to be regenerated okay so we'll move that to the trash so all we should have in the root here is the h2 index.html the package dot jason and the web pack config now since we move those files we have to edit the config file all right so we're going to change this now to slash source /j s slash app J so that's going to be the entry and then the output I don't want it to be in this root folder I wanted to go into a folder called dist okay so what we'll do is just add to this we'll concatenate slash dist okay and then the file name can stay the same that's bundle J s so let's save that and then another thing we need to do is go back into our app J s and the source and change the location here because right now it's going to be dot dot slash into CSS and then style dot CSS okay and then that should do it so let's save it and then what I want to do instead of just saying web pack I'm going to put us an NPM script that we can put in package.json file so see where we have scripts I'm going to change this to build and then that's just going to run web pack okay so we should be able to do npm run build so let's save that and let's try it out so let's go and say npm run build alright and if we go and now this here isn't going to work we need to go to our source folder i'm sorry not a fork so for that we want the index.html here we have to change that because now the bundle is in the disk folder which you can see got created when we ran the run build so we just want to change this to dist slash bundle reload and now everything's working ok so this is a much more professional type of structure than just having everything in on one level alright so I really hope I didn't lose too many of you guys there because this is kind of important where you know your source files and all that if it did if it did sound confusing then maybe go back and kind of listen to it again now there's also something called web pack dev server that we can use to to run just a development server instead of loading it from the file like we're doing here so let me just close all this stuff out see you don't want to say that all right so we need to install this with NPM so we're going to go over here and we're going to say NPM install and we're going to install this globally and then web pack - dev - server and we'll add that to the dev dependencies let's see I got to do sudo okay so now that that's installed what I want to do is go back to our package Jason and we already have the build command here let's add a script for start okay so for that we're going to run web pack dev server now we need to specify where the entry and the output files are because we have those in the source folder so we're going to say - - entry and that's going to be dot dot slash source / J s slash fjs that's the entry file and then we want to do dash dash output - file name and then that's going to be in the - I'm sorry dot slash dist slash bundle dot J s okay so now it knows where those two things are and it can run it in basically in a development server all right I'm just going to put a comma at the end here okay so let's save that and let's hope this works I'm going to close that out and we're going to go over here clear this and let's run NPM start okay so if you look up here it says it started on port where is it port 8080 so let's go to localhost port 8080 and there's our application okay so when you're working when you're working on development you want to use this dev server when you're ready to build it out then you can just run NPM run build now there's one more thing I want to do and that is show you how to use the babel loader okay babel is used to basically take es6 code which is the newer javascript mark not markup but syntax and then convert it down to es5 so that you have maximum browser compatibility and you don't have issues on older browsers and all that so what we're going to do is I'm going to say NPM and stall babble cor babble - loader and then we also want the es2015 preset so that is going to be babble - preset - es2015 alright and then we'll just do save depth for that alright so once that's done all you have to do is go to our web pack config file go down to where we have our loaders and let's go right here put in another set of curly braces and we'll say test and then let's do forward slash back slash dot J s money sign forward slash so this is going to affect all all files that have the J s extension ok so we're going to say loader and that's going to be the babel loader ok now we want to exclude the entire node modules folder we don't want that do not want anything changed in there so let's say exclude and then do slash node modules splash and then we're also going to add this query and this is where we want to put our preset ok we're using the es2015 preset so it's a preset and that would actually be an array so we want some square brackets and then we just want to type in es2015 all right and I believe that should do it so let's go ahead and save that and then what I'm going to do is go over to where we have our server running and I'm just going to cancel that and I'm going to build it out ok so we're going to say was at NPM run build what's this see pre-set invalid let's say that I use the wrong syntax here exclude node modules query Oh an extra are there so presets is 2015 that should that should work so let's try that again alright so we'll do NPM run build alright looks like it went ok and now if we go to our bundle our disk bundle file and let's actually let's search for something that's in the app J s so we have let's say let people so let is part of es6 now since we're using babel which should happen is it should take the let and convert it to var which is part of es5 ok so let's go to the bundle and let's search for people and we'll go down and there it is var people so it's taking our es6 code converting it to es 5 so that we have maximum browser compatibility okay there's the bars again ok so that actually is really really helpful I know that the modern browsers are they're really catching up to es 6 but there are some people that still are using older browsers where you know you may want to use Babel alright so hopefully this hopefully it was clear I kind of feel like I didn't explain certain things as best as I could have but I don't know hopefully I understand at least the gist of it I will make this code available through github it's it's it's a great starter or boilerplate app so you can you know add your own functionality to it but that's it if you're not subscribed and you enjoyed this please subscribe I upload at least twice a week and that's it thanks for watching

Channel: Traversy Media

Views: 205,984

Keywords: webpack, javascript, javascript modules, webpack tutorial

Id: lziuNMk_8eQ

Length: 35min 24sec (2124 seconds)

Published: Tue Apr 18 2017