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.