I love it when screencasts don't spend 10 minutes showing you slides, and they just dive into the code. So let's do that. Let's dive into the code. I'm going to create a directory called webpack-learning, and then we'll cd in there. Check this out. Imagine that we have a source folder, and I'm just going to say alert main for the time being. And all I want to do is compile this down with webpack. Well, as it turns out, you don't even need a webpack configuration file. Now, I am cheating a little bit, because just about every project will have one,

Well, as it turns out, you don't even need a webpack configuration file. Now, I am cheating a little bit, because just about every project will have one, but nonetheless, it's not required. So, for example, we can run it, but actually, real quick, if I try to trigger webpack, well, of course, it's not found, right? Because I haven't installed it. So you can install it globally or locally. There's pros and cons to both, as with just about any tool that you pull in globally. So let's keep it local here. So I will say npm init -y, and that will quickly scaffold a package.json file,

So let's keep it local here. So I will say npm init -y, and that will quickly scaffold a package.json file, and it's not going to make me answer all of those questions. And I like to do this for web-specific projects that aren't libraries, because it doesn't really matter too much. But nonetheless, we're all set. So let's pull it in. npm install webpack. Now, do note in this series, I will be using the 2.x version. We will not be using webpack 1, so I will stick with the default.

Now, do note in this series, I will be using the 2.x version. We will not be using webpack 1, so I will stick with the default. And I'm going to save this to my devDependencies list, and we'll give that just a minute. So if I switch back to package.json, you'll see that I am personally using 2.2.1 at the time of this recording. Okay, so now we're just going to compile this down, and then later we'll talk specifically about what that means. So if we run webpack, you'll see that it's deferring to node_modules/.bin/webpack here. Now, if you're getting a command not found,

So if we run webpack, you'll see that it's deferring to node-modules-bin-webpack here. Now, if you're getting a command not found, you can add node-modules-bin to your path, or just reference it specifically, or you could add an npm script, and we'll cover that at the end of this lesson. So anyways, right now we're getting no configuration file and no output file configured. So what's happening is it's trying to use a configuration file to decide how it should compile your code,

So what's happening is it's trying to use a configuration file to decide how it should compile your code, but we haven't created one. However, as it turns out, we can also just give it a typical source and output. So let's try webpack source-main.js, and this will go to dist/bundle.js. Okay, so if we run that, everything worked. It just compiled down right out of the box. So here's our asset, bundle.js, and it is 2.5 kilobytes. So if we switch back, there it is.

So here's our asset, bundle.js, and it is 2.5 kilobytes. So if we switch back, there it is. Now, this can be a little daunting at first because you think, well, I started with just a simple bit of code, but now my bundle has all of this confusing stuff. Well, take a look. It's really not that much. It's adding, you know, maybe 70 lines worth of code, which, once minified, doesn't really matter at all in the grand scheme of things. Nonetheless, all of this junk, which you never even need to think about, really, it bootstraps webpack.

Nonetheless, all of this junk, which you never even need to think about, really, it bootstraps webpack. It makes all of the required functionality work and things of that nature. But nonetheless, we can see our code right here. So it is, in fact, working. So let's do this. Let's quickly create an index.html file, and then at the bottom, I'm going to import this dist/bundle.js. And I'll say, hello world, and view this in the browser.

dist bundle.js. And I'll say, hello world, and view this in the browser. Now, for the server, just boot it up however you normally would. I'll assume you know how to do that. In my case, I'm using Laravel Valet, which means I can quickly go to webpacklearning.dev to view this. And sure enough, we get our alert. But now we do have one problem if we switch back. We're going to stick with alert just a couple minutes more, just to keep it super, super simple.

We're going to stick with alert just a couple minutes more, just to keep it super, super simple. So don't worry. We're going to dig into some real code here. But if I were to change this, well, one annoying thing is, if I go back to Chrome and I give this a refresh, it still says main, and that's because you haven't recompiled your code. It doesn't do that dynamically without you requesting it.

and that's because you haven't recompiled your code. It doesn't do that dynamically without you requesting it. So in this case, once again, we would have to call webpack. Or, once again, don't forget, you may need to do npm install followed by webpack. But nonetheless, once you do recompile it, you'll get your updated code. Now, what if we did this? Let's run the command,

Now, what if we did this? Let's run the command, but I will also tack on this --watch flag. So notice we get webpack is watching the files. So now, yes, we compiled it down. We can see our bundled output. But it's going to monitor for changes. So if I go back to Sublime, and we update this again, as soon as I save it, if I switch back,

Well, let's finish this up by adding a couple NPM scripts. NPM scripts are pretty nice. We can have any key here, and we'll say echo hello. And now we can trigger it by saying, let's close this out with Control-C, by the way. Anyways, we can trigger this by saying NPM run, and then whatever property you specify, in this case, key. And there we go.

in this case, key. And there we go. We get hello. So let's do this. Let's update this to webpack source main.js to dist/bundle.js. Now, remember how we talked about how you might need to specify node_modules/.bin? Well, when we store this within a build script,

But you know what? For just about all cases, you can stick with something simple like this. So now take a look. I can say npm run build. And that does the exact same thing as it did before, but now I no longer have to memorize exactly which command to run. So let's do one more for my watcher. And this is basically going to do the same thing,

So let's do one more for my watcher. And this is basically going to do the same thing, but I will tack on watch. Now, if we try it, npm run watch. There we go. We compile it down, and we're watching any of the files that webpack is referencing. If any of those change, it will automatically recompile.

If any of those change, it will automatically recompile. Now, finally, in closing for this episode, if your OCD is going crazy over this, you can, of course, defer to other npm scripts. So you could say npm run build, and that will defer to this command. But now in our case, we also want to tack on the watch flag. And if we were to give that a shot,

directly to your script. Okay, so does that make sense? Anything here will be tacked on here. So this will be the output. All right, let's run it again. npm run watch. And now we compile down, and we watch for changes. Okay, so I hope you're excited. There's so much more to cover.