Placeholder Image

Subtitles section Play video

  • everyone, This is cold.

  • Welcome to my Web pack.

  • YouTube.

  • Many course thing.

  • There's a couple things I have to get out of the way first.

  • The most important one is that there is a get have repo that goes along with this course.

  • So if you follow along, if you want to see the code, I mean, I do type every line from scratch, so it is a true code along.

  • But if you just want to check the code out at any point, use this repo Viewed in the browser, there's a bunch of commits with nice, detailed messages.

  • Clone it down if you'd like to use.

  • Get if you feel comfortable checking out each commit.

  • Ah, and I'll reference throughout the video.

  • You know, I'm on commit seven going to commit eight and that sort of thing.

  • Okay, The next most important thing I know everyone's gonna ask, Why am I wearing a hat?

  • I need a haircut.

  • Okay.

  • And I thought this was better than the alternative.

  • You see what I'm working with here?

  • Yeah.

  • Okay.

  • So, onto the course content, this video is about my pack in general.

  • So if you already know how wet Peck works what it does, what the point is, Um, then you might want to skip this or just fast forward through it.

  • In the next video, we start with installation.

  • So because it is 10 videos, I did decide to spread things out instead of just rushing through everything.

  • So I will not take offense if you speed through any videos or skip them.

  • That's what they could have repose for us.

  • Well, if I were taking this course, I'd probably just start by looking at the code.

  • I've always liked to do that before I watch any videos.

  • Okay, so let's get going.

  • Let's talk about what went back is this is the Web Peck home page, and I like how this image explains it went Pack can be very confusing and intimidating and cause many headaches when you're actually setting it up and configuring it.

  • But its mission, its core goal, is very straightforward.

  • It takes a bunch of different assets, different files of different types, job script images like S V, G, P and G J pegs, CSS style sheets or less, or sas all sorts of different files, and it combines them down.

  • It bundles them into a smaller group of files.

  • One file, maybe, or one file for your JavaScript, one for your CSS one for your third party, JavaScript vendor Js and one for your app code.

  • App.

  • Js.

  • It's very configurable, which is where it can become a little tedious and pretty intimidating to people who are learning it.

  • But the idea behind it is very simple.

  • So in addition to just bundling things together and just shoving them into a file, it's also managing dependencies.

  • It's making sure that code that needs to load first is loading first.

  • So if you write a file that depends on three other files, those three need to be included first so often it's a very complex web of dependencies and larger APS, and it would be very difficult to manage it on your own.

  • Web pack does it for you, and it spits out one or two or however many files you tell it to bundle, and I like how they get have Repo explains it.

  • What Beck is a bundler for Javascript and friends packs many modules into a few bundled assets and through something called loaders, which will talk about modules.

  • Could be common.

  • Js Essex CSS images Jason Coffee Script Baba Baba Block The list goes on, so we're gonna see how to do a lot of this stuff.

  • But first I want to show you an example of an app that it's already built will be creating our own from scratch and configuring Web Peck.

  • But this EP is substantially more complicated way more dependencies than what we'll be doing in this course.

  • So this is an app that I'm building for my upcoming react course.

  • It's a a color pickers website, so there's a bunch of color pictures.

  • Click on one you know you can copy a color.

  • There's a whole bunch of features things like changing from hex to RGB to our G P A.

  • All of that involves a library that helps figure out colors and and convert between different color types.

  • I'm using a library to get these nice sliders and this little snack bar thing that pops up down there.

  • There's transitions.

  • I'm using the react router.

  • My point is, there's a lot of different stuff going on that is third party code that I'm depending on.

  • There's some code to help with Dragon drop There's code for a color picker so I can create new pallets, reorder them, I save it.

  • And there's code, in addition for this emoji picker here so I can select an emoji.

  • Anyway, that's enough with the APP itself.

  • But it's sufficiently complicated where I think it makes sense as a good example for Web Peck.

  • So if we take a look at the code, there are, I don't know, 20 something JavaScript components or react components that I've written, plus 20 something CSS files, plus a whole bunch of dependencies, lots of modules, things that I'm using, like react color.

  • I'm using this emoji mart amusing.

  • Ah, material.

  • You.

  • I react, of course.

  • Some form validator libraries.

  • There's a lot of dependencies, and this is for a single file, and there's 20 something of them.

  • So at the end of the day, each one of them has at least this many dependencies, and it's very tricky to determine what needs to load first.

  • If I was manually including script tags for each one of these 20 files, it would not be sustainable.

  • So this is built on top of create react up, which is a pretty standard way of creating new react.

  • Epps.

  • Ah, and it uses Web back behind the scenes in addition to some other things.

  • But what pack is really responsible for the bulk of the functionality behind?

  • Create react up.

  • So it's gonna take all of my JavaScript and combine it into one file.

  • It takes all my CSS and combines it into one file.

  • It does a lot more involving things like babble, for example, but its core.

  • That's what it's doing, its bundling my assets and making sure that it's managing the dependencies.

  • So if I wanted to run the application, I can run NPM Start, which will run it in depth mode, which starts a local server.

  • But it still uses Web Peck.

  • And if I open up the chrome inspector, you can see in sources.

  • There are sea, just a couple JavaScript files bundle Js and then main chunk dot Js.

  • And this contains all of my code combined into one file.

  • There's some weird stuff going on if you're trying to read it using evil.

  • Basically, each one of these is single file that I wrote a massive string, and it's being wrapped in a Web pack module and this is keeping track of what it exports and what it depends on, and you can actually see.

  • For example, this is many palate dot Js.

  • Okay, that's one of the components.

  • And if I keep scrolling over, you can see things like this.

  • Web pack Imported Module six equals Web back require of react.

  • So Webb packed Require is how my pack is keeping track of what is imported where, what need to be exported.

  • What use is what basically manages dependencies.

  • So it replaces my imports and exports with these Web pack requires.

  • So if I kept going, it's pretty annoying to scroll, but you'd see okay, Web packed required many color box.

  • That's another component that this component imports.

  • It relies on that component, and what might surprise you to learn is that it's actually importing all of my CSS as well into this file.

  • So it didn't make me a separate CSS file because I'm running in development mode and I'll show you just a moment, but it does in production.

  • And now if I instead decide to run this in production, which I'm not really going to run it, I'm going to export.

  • I'm going to spit out a build folder.

  • So NPM run build.

  • This is a command with create react up.

  • You'll see that it makes me a couple of files.

  • Once it finishes, it can take a while.

  • Which is why we don't export the CSS files in development when we're constantly changing things because it takes forever to re compile it to re bundle.

  • Okay, so that's just finished.

  • And if we start by going to my text editor scrolling way up, close this down here.

  • There's now a build directory and inside of that build, if we look at our JavaScript, there's a couple of files.

  • There's the's source maps we can ignore, but they're all men, if I'd know.

  • This is the same stuff I was looking at earlier when I was using the Dev version, but now it's been all crammed together and modified, and I have separate CSS files, but if we look at them, they're all of my CSS.

  • Separate files have been combined into one and also men ified.

  • So what Pakis doing office for us again, it's mention dependencies.

  • It's bundling code together, and now if we look at index html, which is somewhere in here.

  • There's only what to script tags to the bottom and one or two link tags at the top instead of 20 or 30 or 50 separate script tags that I would have to do manually.

  • Okay, so hopefully that makes it clear what Web Peck does, why you would want to use it.

  • It's a huge headache on large gaps to try and do something without Web pack or something comfortable.

  • All right, so I mentioned this in the intro video, but I want to bring it back up in case you missed it, or you skipped right to this video so you could start installing stuff, which I get, by the way, uh, but I want to bring it up because this repo is very important for the rest of this court's next nine or so videos.

  • It includes all of the code and all of the commits that I make in all of those videos.

  • So the link is in the description.

  • It includes detailed, commit messages.

  • I'll talk about in each video, which commit I'm currently on, so I do type everything from scratch.

  • It is true code along, but if you want to reference the changes I'm making or if you get lost, or you just wanna look at it without the video, click on a commit and you can see the diff.

  • You can also see the notes have written up top.

  • And if you're more comfortable with, get than clone it and just check out each commit as you go.

  • All right, so this is the initial state of her application.

  • Very, very simple app that we're going to add Web Peck into and configure it a couple different ways.

  • Ah, and you'll see it gets surprisingly complicated just to do a couple of the basic things.

  • Now that's not a dig at Web Peck.

  • It's just, ah, maybe a bit of damage control on my end, just to let you know that this stuff it can be annoying or difficult to follow.

  • Which is why I gave you the get Hub repo so that you don't have to type everything yourself.

  • If you want, you can follow along that way, but you can also just, you know, check out each commit as I go and you'll be able to see what's happening.

  • So the code right now is the initial commit There is no Web pack, it's a single index, html a single app, Js file and an SPG image.

  • So you can see uh, here's our HTML.

  • There's a single script tag at the bottom app.

  • Js has 40 something lines.

  • Imagine that it's 4400 lines instead of 40 and that will help make it clear why Web Pack really makes your life easier once you get it set up, at least.

  • Okay.

  • We also have some content, of course, and then amusing food strip from a cdn so unchanged eventually will actually be using.

  • Local bootstrap will be writing some sass to override different variables, change colors and bootstrap, and then use Web pack to bundle it all together and make it work.

  • But for now, it's coming straight from bootstrap cdn unchanged, and this is what the F looks like when I just open the index html.

  • I'm warning you.

  • It's extremely simple and not exciting.

  • We have two inputs styled with bootstrap.

  • I can add numbers together by clicking on Lee, adding, unfortunately, and it prints out your result down here.

  • So some simple JavaScript and some extremely simple validation if I put numbers, I mean letters in here instead of numbers.

  • I get this alert styled by bootstrap, that says, Please enter two valid numbers.

  • A S D is not a number blah, blah, blah, blah.

  • Blah is not a number.

  • So it's actually really horrible validation because you can cheat it as long as you have a number in that string.

  • So this is going to be one plus 12 which gives me 13 even though those aren't valid numbers.

  • But that's not really the point.

  • The code content of the code doesn't really matter much.

  • It's more about just having Java script that we break up having some sass, having some CSS having an image.

  • That's what really matters.

  • So don't get too hung up on that because the same stuff I'm gonna show you will apply two more exciting, more complicated applications.

  • But I wanted to make something simple enough to follow along with Okay, so the first thing I'm gonna do is break my coat up into separate files, so that will take us in to commit to.

  • If you're following along, that will be the second commit.

  • So there's a couple things that I could break up from my app Js First of all, we have these different functions.

  • I'm gonna put those in their own file each one and its own file in a utilities or you tills directory because we might want to use those somewhere else in the app it checking if inputs are valid, checking or parsing inputs.

  • That's functionality.

  • We could use somewhere else also, you know, we're just breaking it up so that we have something to bundle its not very fun to bundle a single file.

  • Ah, I'm gonna make actually, I'm gonna re factor our code to have to service is an alert service and a component service.

  • And then I'm gonna have a function called run that actually starts all of our code.

  • So I'm gonna do that now I'm going to make a new folder inside of source called APP.

  • And then inside of that, another new folder called You Tills, And then the first utility will be parse dash inputs dot Js and I'm just gonna cut this code right there and put it in this file.

  • And then I'm gonna do the same thing for our second utility function, which is called inputs Dash R Dash valid dot Js and I'm gonna cut this out and paste it in right here.

  • There we go.

  • And I'll fast forward through some of these changes.

  • But I'm gonna make a couple more files just so you can see the file names in the app gonna have alert dot service dot Js I'm goingto have a component dot service dot Js And then I'm actually gonna move my app Js into app.

  • So I'm gonna delete this when I'm done.

  • Okay, so I'm gonna fill out these files again.

  • It's the second commit if you want to see how I broke the code up for yourself.

  • Okay, so I'm back.

  • This is the alert service class called alert Service.

  • I just moved a lot of the code into this.

  • It relies on inputs are valid, For example, we also have component service, which doesn't have any dependencies s so far.

  • And then inside of ap, Js the rial, the new FDA s.

  • I'm gonna delete the old one that's outside of my folder.

  • Now.

  • It's just all in this app folder.

  • So I have my utilities to functions and then I have alert service component service and then ap Js is going to.

  • Instead, she ate new instances of alert service and component service.

  • Call them alert service and component service.

  • And then it has a function called Run, which accepts an instance of alert service and component service.

  • And I'm calling that at the bottom.

  • So this is what actually starts the AP.

  • Everything else is just a function definition or a class definition.

  • But this function run is what actually runs the code.

  • What starts everything.

  • So don't get too hung up on the code.

  • It's not really the focus.

  • Ah, all that matters is that we have code spread across different files.

  • So now my index dot html needs to change because I'm linking to the old app Js But now it's inside of theat directory.

  • So source slash app slash app dot Js?

  • That should get me that file, but you probably comptel already.

  • This is going to be problematic.

  • If I try and run it, refresh the page.

  • There's an error alert service is not defined.

  • Okay, so this is sort of a heavy handed way of proving a point that managing dependencies is tricky.

  • It's not so bad in this example, but we have alert service.

  • We need to make sure that that has loaded.

  • First we need to use components service before we can run this code so apt.

  • Js depends on those two.

  • But then we have alert service which itself uses inputs are valid.

  • So we need to make sure that it's aware of inputs are valid.

  • Right now all that we're actually including is a single script for ap Js.

  • We have to manually include every other file.

  • So I'm gonna do that now.

  • I'll fast forward.

  • Okay, so I now have all those scripts.

  • But once again, I need to change the order because some of them depend on one another.

  • So apt.

  • Js I'll just put that at the bottom because it depends on everything else loading first and now are we good to go?

  • Let's see.

  • Okay, it's working.

  • So that's a very simple example.

  • But if we have 1000 dependencies or 1000 files and each one has 10 different dependencies or something like this from the previous video, this react at that has 20 something reactor components.

  • Each one has a bunch of dependencies at the top.

  • Here's a different component.

  • Whole bunch of other dependencies.

  • So if we're trying to manage this ourself, it's a nightmare.

  • Which one loads first?

  • Instead, we use wet peck.

  • Okay, so we're not using Web Peck right now.

  • We're doing it manually, and the point is that it sucks.

  • So we're now going to install Web Peck.

  • So this is the end of commit too, right now.

  • If you're following along, commit three includes installing Web pack and getting it up and running.

  • So that is what I'm gonna do right now.

  • Okay.

  • So to install Web Peck, the first thing we need to do is actually set up our package dot Jason.

  • So I'm gonna do an N p m and knit.

  • I'll do dash.

  • Why?

  • Just to make it faster.

  • It doesn't ask me all those questions.

  • Now I have my package doubt, Jason, and I'm gonna begin by adding to my get ignored the node modules directory just so that I'm not committing that.

  • Ah, you don't have to do that.

  • Of course.

  • And then in my package doubt Jason, where'd you go?

  • I'm going to get rid of this scripts for now, we'll be adding our own script in just a moment.

  • So we've got name code.

  • That's fine.

  • I'm gonna set private to be true again.

  • Doesn't impact anything as faras Web pack, but, uh, just prevents it from being published on in P m.

  • Okay, now what I'm going to do is install Web pack.

  • So NPM installed Dash Dash saved Dev Web pack.

  • And if I just did this, it would actually prompt me to install a second package which is called Web Pack Dash cli the command line interface.

  • And we want that as well.

  • We want both of them.

  • So this sometimes takes a little bit, so I'll be back once it finishes.

  • Okay, so that wrapped up.

  • Now we have both of those dependencies in our package dot Jason.

  • Next, we're going to set up a script instead of the scripts portion scripts, property of our package that Jason and we'll go with start.

  • So when we run NPM start from the terminal, it's going to call Web pack just like that.

  • It's actually all we have to do for now.

  • We'll change this.

  • We're gonna configure Web peck, but out of the box, this will work, and we can actually give it a shot right now, But we're gonna run into a few problems.

  • So before we can figure what, Peck, we will be configuring it.

  • Ah, and telling it all sorts of different things.

  • That how it should work, how it should handle certain files where it should put certain files, how many it should bundle, but it should name them.

  • Bah bah bah, bah bah.

  • But by default.

  • When you install it and you don't configure anything, you don't have a configuration file.

  • It has a couple of default values, and we can actually see one of them.

  • If I just do in P M start right now, it's going to call wet pack.

  • You can see right there.

  • Uh, where are you?

  • What pack?

  • But if you look at the error, it's telling me it can't resolve dot slash source.

  • So it's actually not the most clear ever.

  • But what it's saying is it can't find index Js inside of the source directory, the default entry point that it's looking for.

  • What it's craving is an index Js file instead of source.

  • And the reason it says dot slash source instead of slash index afterwards is because when you require an entire directory and node.

  • Ah, the index Js is what is used by default, so it's not finding it.

  • So it's not happy.

  • So let's make an index Js instead of our source folder index dot Js.

  • This is where it's going to look.

  • Let's add an alert.

  • Hello from Web pack will save.

  • Now Let's see what happens when I run and P m start once again by default.

  • We didn't configure it.

  • It's looking for that file, so we made it.

  • Now it's also saying something about a main Js.

  • It built are code two Main Js.

  • Okay, and there's also a warning down here.

  • We didn't set the mode option, so it falls back to production.

  • We'll talk about that later in this little mini course.

  • So if we look, there's a new folder.

  • I did not make this folder manually.

  • It's called Dissed, and there's a file called Main Js, and it contains a lot of random stuff.

  • What's not random?

  • I hate when people misuse that word.

  • Random even thought we just did that.

  • It's not at all random.

  • Ah, it's very important Web pack magic at the top and then you can see buried in there is our code.

  • Now it's actually wrapped in some some braces and Forenza and curly braces.

  • That's because Web pack isn't just adding our code as just, ah, I don't know, regular code to the end of the file.

  • It's not just a pending it down here, it's wrapping it with some Web pack magic.

  • And in the next video, we'll actually take a look at it and understand what it's.

  • Well, try and understand what it's doing.

  • Ah, but for now, it's good enough to see that our code is in here.

  • So it has nothing to do with the rest of our app has nothing to do with these.

  • Component Service is with the logic of that little calculator.

  • It's not even loading right now, so let's fix that.

  • Let's go into our index html and at the very end include another script, this one instead of app slash app dot Js.

  • It's going to be dot slash dest slash main dot Js.

  • This is the file Web pack spit out for us.

  • This is what it just built.

  • It's very simple.

  • It took one file in, had a single line, and it spit it out with a whole bunch of other lines.

  • But that's all the Web peck magic I was talking about.

  • We'll come back to it later.

  • So now if I go back, refresh.

  • We're getting this.

  • Hello?

  • From what?

  • Peck?

  • That alert is working.

  • So seems to reason that if we put other code in here, it would work.

  • And that's just what we're gonna do.

  • We're gonna put our code from the APP in this file that's actually coming up next, because it's not as simple as just copying and pasting it, because we want to keep it across the different files.

  • So we're gonna use the Essex Import and Export to do that for us.

  • And then when pack will build this one file.

  • Ah, but the other thing we're gonna do in the next video is configure what pack?

  • Set up a basic configuration file.

  • Right now, it's looking for index dress, and it's spitting out the code and distant main dot Js.

  • We didn't tell it to do that, So it's ah, it's rampaging on its own.

  • We're going to try and rein it in and tell it exactly how we want it to work.

  • The last thing I should mention uh, I'm going to add the dest directory into my get ignore, because just like node modules, both of these directories don't need to be included.

  • When I push this up to get hub, they just take up space and you can derive both of them from the code you run and PM install.

  • You get node modules if you run and P m start Web pack will build the DIS directory with the main Js, so I'm not going to include it with get all right.

  • So we're now at the end of the third commit.

  • If you're following along the next commit that will do in the next video has to do with telling Web Peck all about our app code and configuring it.

  • So right now, our APP is existing in a vacuum.

  • Web pack doesn't know about it.

  • We have Web pack up and running, but it's only bundling this code right here.

  • What we want to do instead is call some code and hear that it's from our application, and we have these five different application files.

  • Inputs are valid parts inputs and so on, and we're going to call some code from this file So when I bundle this file with NPM start, it's gonna go grab all the relevant dependencies and put them all into a file which, ideally, is gonna put all of these five files together for us.

  • But first, we have to declare which files depend on what, and the way we do that is by using Essex imports and exports.

  • So in each file, we're going to indicate what will be exported from this file as well as making sure to import any relevant dependencies.

  • For example, if we look at this one alert service, it depends on inputs are valid.

  • So we're gonna make that clear.

  • We're going to import inputs are valid.

  • But we actually can't do that yet because we haven't exported anything from that file.

  • So if we look at that here, it is just a single function.

  • I'm going to export inputs are valid and then inside of my alert service, I can now imported imports and I didn't export default.

  • So I need to use the exact name here instead of curly braces.

  • Inputs are valid from, and then the path to that file from Alert service's dot slash you tills slash inputs are valid.

  • And then while I'm here, I might as well export alert service because we're using that instead of our app J s, you can see right here.

  • I will need to import alert service.

  • But let me just begin by exporting the other thing.

  • So we've got component service.

  • It doesn't have any dependencies in here.

  • As far as I can tell, we have inputs are valid.

  • We're done with that.

  • We exported it.

  • We have.

  • Ah, what's the other one parts inputs.

  • We will export that.

  • And where were using parts inputs?

  • I think it's an app you can see right here.

  • We rely on parts inputs and inputs are valid.

  • So I'm going to copy this line from alert service and move this into ap Js at the top.

  • And we also rely on parse inputs from dot, slash, details, slash parse inputs.

  • Okay.

  • And then we have a large service and component service that we're using in here.

  • But I'm gonna hold off on doing that for just a moment because we have to talk about what is going in our index Js right.

  • This is our entry point.

  • This is where Web pack is going to start.

  • We need to run some code from here That will then send Web pack sniffing down through all the files to figure out the dependencies to figure out what code needs to be bundled.

  • So we need to have a little window into our application code.

  • And the most logical choice would be to run this function to call this function from inside of index.

  • This is the function that starts everything.

  • So instead of calling it inside of our after, yes, I'm gonna delete that.

  • So I exported out of this file.

  • So now, instead of my index dress, I can import run from and then the path to that file from Index trey s is dot slash hope not in the right spot dot slash app slash app is the name of the file.

  • And then I can call run.

  • But that's not the end of the story.

  • Because if we look at what run is using, we need to pass in an instance of the alert service and an instance of the Component service.

  • So I'm gonna cut that out and move it over to Index Js.

  • But that's not enough.

  • I can pass in alert service and I can pass in component service, but we still have to import them here, just like in every other file where we're using something.

  • This is a good example.

  • Component Service and other products.

  • Handful.

  • Let's look at alert service.

  • We need to import inputs are valid because we're using it in this file.

  • Same thing here if we're trying to entertain.

  • She ate a new alert service we need to make make it very clear.

  • We need it.

  • This is going to tell Webb pack.

  • All right.

  • We need to make sure alert service has loaded before we can actually create one and pass it in to run.

  • So import alert service from dot slash what?

  • We were inside of Index Trieste.

  • So app slash alert dot service and then I'll duplicate this.

  • And this other one is component service from app slash component dot service.

  • Okay, now we should be okay.

  • We'll double check.

  • We're importing everything we need.

  • So importing run alert servicing component service.

  • Then we're calling run.

  • With the new instances of alert service a component service app Js now just has this run function.

  • But it also relies on inputs are valid parts inputs.

  • As you can see, we're using it in here.

  • Ah, inputs are valid parts inputs.

  • They have no imports.

  • They only export single function and then we have component service doesn't import anything, but it does export.

  • And lastly, alert service we exported and it relies on inputs are valid.

  • Okay, so let's see what happens now when we actually run in P m start, we now have code.

  • We have, ah, entry point into our application.

  • It's not just an alert and Web packets gonna go.

  • And I keep saying sniff, I don't know why I have that idea in my head, but it's gonna burrow down and start looking in here and look at what APP depends on for run.

  • And it's gonna realize all this depends on inputs are valid and parts inputs.

  • And then it's gonna check those.

  • Do they have any imports?

  • Do they export something and it's gonna keep going and essentially form a tree for us.

  • So let's see what happens when I run and P m start.

  • Hopefully, I don't have any typos.

  • Okay, Now let's look at what it built for us in the disc directory.

  • Main Js Now we can see all of our code is down here shortly will address what all of this is.

  • But all of our code is here.

  • It's not just a single alert anymore and we have our script included.

  • As you can see, dest slash main dot Js The true test will be if we can remove all of these scripts that were there before and just have this one main Js file and have everything work still.

  • So let's see.

  • I'm gonna refresh the page.

  • It looks like it's working.

  • Okay, Looks good.

  • And if we go to our sources tab what we can see instead of artist, there's a main Js.

  • It's men ified.

  • It's hard to read and understand.

  • We will talk about that, but it's working.

  • Oliver code is loading.

  • It's being bundled into a single file so it doesn't matter.

  • You know which order were writing these files in?

  • We don't have to indicate.

  • You know this file must load first on this one must load second.

  • We just indicate this file depends on this and this and then would pack takes care of the rest It make sure that everything is loaded in a valid order.

  • Okay, so I just committed the code again.

  • If you're following along, Everything I just did is in the fourth commit.

  • Just show you the get logs so far right here, Web back now bundling all our code.

  • That's what we just set up.

  • So we still haven't configured Web Pack to do anything beyond the default configuration that's coming up next, but it's at least running off our code.

  • It's bundling it all together, making sure everything is in the correct order or making sure that the dependencies our managed nicely.

  • And then we include a single script tag and Oliver Code works, so this would apply instead of four files where we have 40 lines of code.

  • The same idea applies where we have 100 files with 50 or 100 line to each, as long as we write explicitly what each file depends on and what it exports.

  • Okay, next we're gonna configure, went back.

  • We got to set up our own configuration file, and we'll dive into what's actually happening in this main Js file.

  • I'm now working on the fifth commit in her application.

  • If you're following along with git and What we're gonna do in this video is configure what pack, or at least set up the CONFIG file and replicate what it's already doing.

  • But we're gonna add a couple of other settings to change the output.

  • So we're gonna begin by just talking about what it's doing for us right now.

  • So we've already seen this.

  • The default place it's looking for an entry point is index Js instead of source.

  • I didn't tell it to do that.

  • The only thing I told it to D'oh is just run Web Peck.

  • When I run in P m start, it just says Alright, what Pak do your thing Web Peck says.

  • Oh, there's no config.

  • I'm gonna look for Index Js instead of source.

  • We didn't have it there a couple videos ago and it gave us an error.

  • And the other thing it's doing is it's putting the code in a directory called Dissed in the main Js file.

  • I didn't say I should do that either.

  • That's the default behavior.

  • So if we want to change that or in our case, if you want to add on other things like we're gonna talk about plug ins and loaders throughout the rest of the course.

  • Ah, we have to have a config file to do that eventually will actually have one config file for development one for production.

  • But I'm just gonna make a file.

  • I can call this whatever I want.

  • I'm gonna call it Web pack dot config dot Js.

  • And then there's a couple of weird things that we have to get out of the way.

  • The syntax for these files looks like this.

  • So we're going to export an object and it's going to have a couple of properties.

  • We're going to add an entry point, which I'll leave as an empty string.

  • For now, we're going to have an output which will be an object, and we'll start with these two.

  • So our entry point if we're just recreating what we already have, it's dot slash source slash index dot Js So not doing anything new for us, But we're explicitly telling it to do this now because it will allow us to in addition, add some other functionality down here, which we don't have right now.

  • Now where you want it to output it while the first thing that we can configure is the file name?

  • Not Phil.

  • Name, file name.

  • If we wanted, we can keep it as main Js we could go with, um I don't know, hello dot Js Just to show you that it works.

  • And then the trickiest part is we have to tell it where to go, where to actually spit that code out.

  • And to do it, we're going to import a module from node that we get.

  • We don't have to install this.

  • It's just comes with note.

  • It's called path.

  • Constant path equals require path.

  • And what we do is right path dot resolve, double underscored dear name, directory name.

  • And then the name of the folder that we want the code to go in.

  • So in my case, I'll do dissed.

  • But to show you you may not want to type this because you're gonna make an extra directory.

  • But just to prove my point, I'll just call this code like that.

  • Help and I'm missing my equal set up here.

  • Okay.

  • No wonder my editor was yelling at me.

  • So we have file name.

  • Hello?

  • Js path is path dot Resolve.

  • So what is this all doing?

  • What?

  • His path dot resolve.

  • Well, what this is going to do is resolve an absolute path to this code directory.

  • So it's gonna take whatever the current directory is.

  • So if I'm running this on my machine, this path will be something like slash Coulter.

  • I think I'm actually using a different account called recording user slash documents slash whatever.

  • All my stuff is slash code.

  • But then if someone else is running it on their machine, we don't want to put this recording user hard coded, hard coded in there as the path for the output so we can use passed out resolve, which will take the current directory name, dear name, which every node script has automatically loaded by default.

  • Anyway, this is just a long way of saying we want to make a file called hello dot Js inside of a file or a directory called Code.

  • So the last step, if we want to use this configuration, is to tell Webb Pack to use it.

  • So right here in our package dot Jason, we can pass it pass in dash dash config, and then the name of the file web pack dot config dot Js.

  • Okay, so I mentioned you may not want to actually run this if you don't have this set up as dissed and main Js because it's gonna make you a new folder and a new file and I'm just gonna delete mine right after.

  • But let me show you that it works.

  • Fingers crossed that it does work.

  • Let's see what happens.

  • All right, we have a new folder and file called hello dot Js.

  • So that is coming From what?

  • Peck.

  • It's not doing anything with dissed anymore.

  • We could delete that.

  • But instead I'm gonna delete my code directory.

  • So let's do that now.

  • Arm dash R F code.

  • Okay, that file's gone.

  • I'm gonna change this back to maine dot Js and change this to be dissed.

  • And that's what most people do.

  • Or you could have the folder called.

  • He called Build instead.

  • But there's a lot of options, but code is probably not the best example.

  • So the next thing we can do just to show you why you would even do this if we're just recreating what we already had, why go through this effort?

  • Well, we're going to spend a lot of time adding in different plug ins and loaders and having what Peck handle different types of files.

  • But for now, remember how I said All of this is modified and ugly and hard to understand.

  • What's happening is that it's running in production mode by default, and I can tell it, Let's not do production but set mode to be development, and that mode is going to tell it to stop men if I So now, if I re run my code or if I re run Web pack instead of dissed, we have a main Js, and it's no longer all scrunched up into this really hard to read thing of coat now.

  • Usually you're not gonna read this anyway.

  • That's not the point.

  • You've read your code in the files where you're writing it, but then Web pecs spits out a bundle.

  • But just to show you what it looks like, you can see all of it here.

  • Now.

  • One thing that's kind of annoying.

  • I don't know if you can see this.

  • It's using evil all over the place.

  • This is another thing that it's being configured by, ah Web pack automatically.

  • If we want to change that, it's not really a performance issue.

  • But just for understanding what's going on, we can add another thing called Dev Tool.

  • And if we set Dev tool to none and I always forget, it's a lower case T.

  • If I re run it this time again, this is not something you need to d'oh.

  • But if I look at the code now, you can see that all of our code is in here relatively unchanged.

  • We don't have that weird evil stuff going on, so this allows us to actually understand what this file is doing.

  • So the very top of it is some Web pack stuff that has to do with defining different functions to make a Web pack module.

  • There's one called wet Pack require, So if we look at the code that's added in further down, for example, if we look at alert service, let's look at the File Alert Service has this classes we've seen in it exports that class, but it also imports inputs are valid.

  • But let's look at what Web pack put in the file.

  • If we go to our I guess I closed it our main J s.

  • We can see that it says exports provided alert service, and it wraps the entire thing in this function to create a Web pack model.

  • All of this right here it ends right there, but then inside of it, we don't actually have our import anymore.

  • I don't see that line that we had at the top of alert service.

  • That said, import inputs are valid.

  • This is gone, and it's been replaced instead with some Web pack magic where we have Web pack require.

  • See right here, Web packed require source app, you tills.

  • Inputs are valid, so impact is now taking control.

  • And this Web pack require is making sure that our code is all loaded in the correct order.

  • It's managing what depends on what.

  • So it's basically using this as a hook, seeing this here and realizing it's not realizing something.

  • But it has logic that is making sure that it's doing its own Web pack version of requiring that module.

  • So if it keeps going down, we can see for other things like ap.

  • Js app Js depends on parts inputs, so it's requiring it with Web pack require and inputs are valid, Web pack require, and we can keep going and you'll see that all of our code is in here.

  • It's been added in and slightly modified to use Web pack require to be wrapped inside of a Web pack module.

  • And a lot of that all of that logic is coming from here.

  • Okay, so I'm gonna go and undo or delete the deft tool.

  • None will come back to that later.

  • We'll talk about source maps, but I'm gonna leave mode at development for now.

  • So we're gonna end here.

  • Actually, we haven't really configured very much.

  • We've just seen how to recreate what we were getting already.

  • Although we did add in mode development.

  • But in the next video, that's all gonna change because we're going to start talking about loaders.

  • How do we handle different types of files that aren't just JavaScript?

  • So that's coming up.

  • Next, we're gonna have to edit our config file.

  • So I'm gonna commit right now.

  • If you want to just see this code, it is thief.

  • Fifth commit.

  • So we've seen how to take different JavaScript files and bundle them together with Web Peck.

  • It's pretty simple.

  • It's the default behavior of Web back.

  • We just tell it.

  • Here's where you should start now.

  • Just go grab all of the code that's it's somehow related to this index file.

  • So go grab, run and then its dependencies and so on.

  • But that's just javascript.

  • But we started out a couple of videos ago talking about how Web pack him, bundle all sorts of files, images and other static files, things like Jason Sassy S.

  • S S.

  • P.

  • G's.

  • There's a ton of stuff we can do in this video.

  • I'm gonna show you how we actually do that.

  • We have to install some packages.

  • We have to modify our Web pack config, and we have to talk about loaders.

  • So loaders are the magic there.

  • The key forgetting Web pacto handle different types of files besides job script.

  • So they are different packages that we install, and they dictate how certain files should be pre processed as you import them are as they are voted, so you can transform files and do different things based off of the type of file.

  • For example, we can handle a CSS file one way we can handle a SPG file another way.

  • So on the Web pack documentation, there's a list of some of the most popular loaders you can see under styling.

  • Where is that?

  • There's quite a few.

  • We'll talk about what the difference is.

  • It seems like style.

  • Loder would work for CSS, but then they're CSS loader.

  • What do they do?

  • How are they different?

  • We'll also talk about getting sass to work towards the end of this video as well.

  • And then this is not just a complete list.

  • There is another link that will take you to a different one page that shows you a whole bunch of other loaders that other people have written.

  • So my point is that loaders are really, really useful.

  • It's how we get wet pack to handle to pre process different types of files.

  • So we're gonna add some CSS into our application.

  • We're gonna start really simple.

  • Uh, I'm on commit five working towards commit six if you're following along.

  • So I'm gonna make inside of my source directory a new file called main dot CSS.

  • So remember a couple of videos ago when I showed you the large create react app that had 30 or 20 different CSS files and they're bundled together.

  • We could have Web pack do that for us, but we're going to start simple with a single selector.

  • We're gonna set the body background color to be purple for now.

  • So of course, right now we're not gonna see anything because we're not including this in our HTML file.

  • We could include it as a script manually, but the idea is to go through web back.

  • We could have 20 something files of CSS Web pack should bundle them together and then somehow get it to just work.

  • The somehow part is what we'll talk about.

  • So we're going to need to use two different loaders.

  • One is called style Loader one.

  • It's called CSS loader.

  • So we can begin.

  • We come down to styling, we're gonna begin with CSS Loader.

  • And before we go any further, we have to talk about how we actually set up thes loaders.

  • This is what we add into our Web pack config file.

  • So under module, which is an object, we're going to pass in rules which is in a ray, and we can put different rules for different types of files for different modules.

  • So we can say in this case if a file ends with dot CSS if the name of the file this is a regular expression.

  • If you're not super familiar with rejects, this dollar sign means that it has to end with dot CSS so it can't have CSS just in the middle of a file name.

  • There has to be a period we have to escape it.

  • So that's the backslash period.

  • CSS end of string or end of name.

  • And then, if that's the case, we would use thes to voters.

  • So we're gonna begin by installing both of them.

  • And I'll tell you what the difference is and why you need both.

  • Just a moment.

  • But let's do our NPM install Dash, Dash save Dev style loader and CSS loader.

  • Okay, well, that's going.

  • I'm gonna go back into my Web pack and fig, and I'm going to update this to now have module, and then we have rules, which is an array.

  • And then we're just gonna add our first rule where we add test And remember, this is a regular expression and honestly, we can just copy this one for now, just like this. 00:43:10.900 --> 00:

everyone, This is cold.

Subtitles and vocabulary

Click the word to look it up Click the word to find further inforamtion about it