Name: Webpackを学ぶ - 初心者のための完全なチュートリアル (Learn Webpack - Full Tutorial for Beginners)
Uploaded: 2021-01-14T10:24:24.000Z
Duration: 1 h 53 min 1 s
Description: VoiceTubeの動画で発音を聞きながら英語表現を覚えよう！学べる英語：

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.

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?

And I thought this was better than the alternative.

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.

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.

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

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.

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.

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.

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.

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?

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.

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.

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.

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