Using Webpack for the First Time

[00:00:02]
>> Sean Larkin: What I really wanna do is just kinda start diving into using Webpack. Let's use it for the first time, from scratch. A lot of the code that we're gonna work on today is gonna be coding along with me. And so [LAUGH] I love to preface this and say, I'm probably one of the least creative people as possible when it comes to building the web app.

[00:00:34]
And we're just gonna talk about the core pieces, so it may not be the most visual. It's not gonna be Sarah Drasner doing these beautiful page transitions with SVG animations, not at all, although those are really great. We're gonna be just doing bare-bones, because the whole point is that you, like every single one of your workflows are completely different.

[00:00:57]
And so trying to pull up something that's already created and walk through it is not gonna provide as much value as it is being able to just start from scratch, build as you go. And then understanding that you have the flexibility to do anything, anyway that you want.

[00:01:14]
And especially, I think some people would say Sean, there is no. Actually, there's a Twitter thread yesterday. Somebody who was from the Rails community was ripping on Webpack and his first response was, I guess the problem is that there isn't one right way to do things. I'm like yeah, it's the web.

[00:01:32]
>> [LAUGH]
>> Sean Larkin: There is no one solution for what you're trying to create. If every web application was made the exact same way, Webpack wouldn't exist. We wouldn't need it. But that's not the case. We all have unique challenges. We either work for finance, or e-commerce, completely different domains of things that you're trying to solve.

[00:01:53]
And things are gonna be completely more or not important to you. So if you haven't cloned this repo already, go ahead and do so. And I actually want you to check out. So there's a lot of branches that are there, and we'll probably jump back and forth. If you feel like you're lost at any time please speak up.

[00:02:15]
Because this is the most important part, is you experiencing how to do it, and having the confidence of doing it. So there is a branch that you can check out. And so, let's see, let's just pretend I'm on master, okay? All right, so I'm asking you to look, and you're like Sean, there is nothing here.

[00:02:40]
That's the point, we're starting from scratch. So we're gonna jump to git checkout feature, feature I can't spell, /01-fem-first-script.
>> Sean Larkin: All right,
>> Sean Larkin: So you're going to see that there are a billion dependencies in here, but that's intentional. I use Yarn myself, who uses NPM? Okay, so the commands are gonna be the exact same, the only difference is if I'm running a script.

[00:03:16]
Or if I'm installing anything I'll probably use Yarn, I'll just type yarn instead of npm install. So if you wanna go ahead right now you can run npm install. And it's gonna pull down a whole bunch of dependencies, cuz of course the Webpack ecosystem is huge. And so you have a lot of different integrations and things to choose from.

[00:03:37]
And we may not cover every single one of these, but we are gonna touch on definitely the fundamentals. And how to include these features into your application, or as you're building it. And so I'll run it myself, run yarn or npm install, either is fine. You might see some dependency warnings, that's okay, that's NPM [LAUGH].

[00:04:05]
Now while you're doing that, and I hear the multicore fans kicking in on your Macs and your PCs. So while this is happening I'm gonna give kind of a high level overview, or we're just gonna look and work through understanding how scripts work, right? So if you've never been familiar with the NPM ecosystem, you'll probably wonder how the heck you run anything, right?

[00:04:31]
You're using Node, that's a prerequisite, and you need to actually run Webpack. So when you install packages, or you might notice if you do npm install, you could do --save-dev. I usually recommend if it's NPM, you do npm install -dev. If you don't, that's okay too.
>> Sean Larkin: But regardless, what NPM does is it takes and adds a .bin folder inside your node_modules.

[00:05:03]
And these are the executables for all of the modules that have been downloaded. And so each of these have some sort of CLI or binary executable, including Webpack itself. And so to actually run these, if I was just to try and do webpack in here, it doesn't work, it fails, see?

[00:05:26]
It says webpack not found. So what NPM does is it allows you to run scripts that hoist that binary package within its scope. So this gives you the opportunity, so the first thing we'll literally do here. Now I know that there's a script field already, but if you wanted to have that from scratch experience, you can literally just add a scripts key.

[00:05:52]
Or a scripts key, and then the object is the value. Now basically how this works, is you can have anything in here. It could be seanlarkin, and then what NPM will allow you to do is, you can run any sort of command from here. It can be any sort of even Bash command, but the difference is now you have those binary executables in this scope.

[00:06:20]
So for example, if I wanted to run Webpack, all I have to do is type webpack here, right? So now to run it, it's either npm run and name of that script, right?
>> Sean Larkin: But why don't we, just for the sake of following along, we just rename it to build?

[00:06:43]
Or we can even call it webpack. I like that, because then I know exactly what that's running. So if I just said, npm run webpack and I saved this, oops.
>> Sean Larkin: There we go, that's the feedback I'm used to seeing. That's the default console output for Webpack.