Now, in the last episode, I showed you the simplest possible way to compile Webpack, which is really cool for simple projects. But for real-life projects, you're going to be doing quite a bit more. So instead, we'll set up a webpack.config.js file. Now, when it's in your project root, any time you trigger Webpack, it will automatically look for that file. However, if you store it anywhere else, you can specify it explicitly. So you could say, go in the node_modules directory if it's stored in a package, like laravel-mix. But most of the time, yeah, you can just stick with the default.

Laravel-mix. But most of the time, yeah, you can just stick with the default. Okay, we're going to pull in Webpack. Now, let's export an object here. And this will, of course, be our Webpack configuration. It's where we tell Webpack, well, where's our entry point? Where's our exit point? What plugins do we want to use? What loaders do we want to use? I'll teach you about all of this.

What loaders do we want to use? I'll teach you about all of this. So let's begin with our entry, as well as the output, just like we did before. Now our entry is going to be, well, source-main.js. But now for the output, we want to give it a path to the output folder, as well as the name of the file itself. So in our case, we could say path will be the dist folder, and the file name will be bundle.js. And yeah, we should be all set to go. So let's give this a shot.

And yeah, we should be all set to go. So let's give this a shot. I can run Webpack, or once again, you could be explicit about where it's located. So we run it, and there we go. We get the exact same thing, just to prove it to you. Let's delete that and do it again. But yeah, we'll get the exact same thing as we did before, which is great. But now you'll find that Webpack generally wants your output path to be an absolute path. So with Node, we can do this by importing the path dependency. And then I can say path.resolve, and think of this as saying, we want to resolve this.

So now this means I can go back to my package.json file, and rather than doing this, I can remove it entirely with the understanding that it's going to read my webpack.config.js file. So let's try it. npm run build, and there we go. Or npm run watch, it compiles, but now it is watching for changes. So that means if I change this, save it as we discussed in the last episode, it will recompile, as you can see right here. Okay, in the next episode, let's take another step.