Okay, take a look. I'm going to go to my webpack.mix.js file, and at the moment, it's blank. So that means if we were to compile everything down, well, we have no tasks. So it compiles and does nothing. Let's fix that. Like we learned in the first episode, maybe I want to trigger JavaScript compilation. And actually, on that note, let's bring back IntelliSense. And here you can see a very quick overview of the basic API that we provide. Generally, you have about 20 different methods. And in reality, you'll probably only use about five for your own projects. But yeah, whether you need Babel compilation, if you need to copy a file or concatenate, if you want browser sync, if you need to check for if you're in a production environment, if you want LESS or SASS or Stylus, yeah, all of this stuff is going to be available to you. Anyways, we're going to do JavaScript compilation for now. And I will once again reference an app.js file.

or Stylus, yeah, all of this stuff is going to be available to you. Anyways, we're going to do JavaScript compilation for now. And I will once again reference an app.js file. However, you'll notice for this video, I've completely cleared out my assets directory, we're going to start from scratch. And on that note, let's delete the foo.less file from the first episode. Okay, so I'm going to create a file in that directory. And then we will compile it down to my public/js folder. Okay, let's go ahead and create that file, resources/assets/js/app.js. Now to begin, we'll just say alert('hello'), and close that out. Let's compile everything down. npm run dev. And there's our compiled file. Let's access that public/js/app.js. Okay, and immediately, here's what you see. And you think, wait a minute, I started out with a single alert. And then what you gave me is this 80 line monstrosity. And you think this is this is crap. I'm not going to use

naturally work within any relevant browser. So when you see this generated file, it can be daunting. It's just setting up the world to make everything work. You don't need to worry about it. And it's 80 lines of code. Once you minify it in production, let's take a look npm run production, you'll see that it compiles down to 525 bytes. And we're all set to go there. So again, notice when we did npm run production rather than development, well, that was a mixes hint, we need to also perform uglification, we need to minify this asset, because it's ready for your production server. Anyways, let's come back to resources and our main alert here. Yeah, in real life, you might want to import something. So for example, maybe I have some kind of notification. So I could say import Notification from, and then maybe I have a components directory Notification. Okay, let's go ahead and create that resources/assets/js/components/Notification

So I could say import Notification from, and then maybe I have a components directory notification. Okay, let's go ahead and create that resources/assets/js/components/notification.js. Now I'll note this series, it's not going to be a full review of ECMAScript 2015, or how to construct modules or anything like that. We've covered all of that stuff at Laracasts already. So I'd recommend going to those videos and those relevant series to learn more. In our case, we're trying to stay focused on webpack. But anyways, yeah, here, maybe I have maybe I have a class here that I'm exporting. And for the constructor, we're going to have the message that I will assign, like so. And then maybe we have something like as an alert. So if I want to trigger this notification as an alert, I will alert(this.message), just a very basic example for our demo. Okay, I will now import that module. And then we'll build up a new Notification.

to trigger this notification as an alert, I will alert this dot message, just a very basic example for our demo. Okay, I will now import that module. And then we'll build up a new notification. Hello there, and then display it as an alert. Now again, with vanilla JavaScript, this isn't going to work in the huge majority of browsers, because they don't yet have any concept of modules and how we import them. So we have to compile everything down. Alright, npm run dev. And now you'll see, if we go to public/js/app, our compiled file, and we scroll down, behind the scenes, it's doing all of the necessary babel compilation to make things work the way you'd expect. So let's give it a shot. We'll go to Laravel's welcome view. And let's just clean all of this up. Like so. We're totally starting from scratch. Alright, so we will pull in, well, it compiled down here. Let's now take a look. And there you go. Really not that hard, right?

of this up. Like so. We're totally starting from scratch. Alright, so we will pull in, well, it compiled down here. Let's now take a look. And there you go. Really not that hard, right? And all it took was installing Laravel Mix, and then creating a file and saying, hey, I want to compile this file down for any browser. Now underneath the hood, it's actually doing quite a bit. So behind the scenes, we're using a tool called babel, which takes your existing modern JavaScript code, where you're using the latest ECMAScript 2017 code, you're using async await, you're using modules, any of that stuff. And it will then compile all of it down, so that any browser can understand some vanilla JavaScript. It also has support for everything from tree shaking, to importing modules, of course, to minification, and everything in between. So for example, maybe right here, you actually want to import a dedicated view file, if you're familiar

coming along for the ride to see what Mix affords you out of the box. All right, so now I have my notification component. I'm also going to import Vue. Now, you'll notice that Laravel recommends or suggests Vue out of the box, but of course, you don't have to use it. Otherwise, you can install it manually by saying npm install Vue. Okay. Anyways, we've pulled that in, so I can import it here. We will create a new Vue instance and specify notification as one of its components. Next, I'm going to bind it, the root Vue instance, maybe to an element called root, and I think we're all set to go. So once again, I'm going to compile everything down. All right, and it's about 300k because we have pulled in the Vue library, we've bundled everything up, we're all set to go. So now we're going to go back to our welcome file, and we're going to have a div with an

we have pulled in the Vue library, we've bundled everything up, we're all set to go. So now we're going to go back to our welcome file, and we're going to have a div with an id of root, and then at the bottom, we're already importing it. So now because we have our notification component, I can just say notificationMessage is foobar. All right, let's take a look in the browser, and sure enough, we can see our fancy, completely unstyled notification. So then, yeah, maybe you want to style it. So maybe we'll say here our class is notification, and then a notification should have a border of 1px dashed red, just for the example. All right, well, remember, we're not watching for changes, so I would have to run this again, or in your regular development, do npm run watch, and I'll show you. It compiled everything down, but now notice it's just sitting around waiting

series. It's only meant to demonstrate that all of this stuff will just naturally work out of the box, when otherwise, you'd actually have to do a decent amount of research to figure out how to compile things down, how to bundle it all up. But yeah, with this, you kind of don't even need to think about it, which is nice. Now, if we switch back, in addition to regular JavaScript compilation, you'll also maybe come across some other methods on our API, like mix.scripts, or even mix.babel. Think of these as a way to perform just basic script concatenation. And this was actually very common a number of years ago, but it still might benefit you, depending upon the project you're working on. So let's imagine that within your public/js directory, you have one file, and this will simulate some kind of code within it. And then we'll have another file with some additional code in it. Now, these days, it's honestly less of a concern,

one file, and this will simulate some kind of code within it. And then we'll have another file with some additional code in it. Now, these days, it's honestly less of a concern, but back in the day, it was a general recommended approach to concatenate all of your files, so that you minimize your number of HTTP requests. You should still consider it, but as we push towards HTTP2, it becomes less of an urgent consideration, but you still want to think about it. Anyways, let's say you want to concatenate those into one. Well, in these situations, mix.js is not the appropriate choice, because you don't require any bundling, and you don't require modules or anything like that. So in those cases, all you're going to do is just mix these scripts together. So public/js1 and public/js2. Finally, where are we combining those two? How about public/js/everything.js? Okay, let's compile it down. npm run dev. And there we

mix these scripts together. So public/js1 and public/js2. Finally, where are we combining those two? How about public/js/everything.js? Okay, let's compile it down. npm run dev. And there we go. We've created our file, and that will now contain the contents, if we scroll up, of both of those files. And now, once again, if I do npm run production, well, that's our hint to mix, hey, I want you to prepare this for a production environment. So it will minify that as best as possible. However, imagine, let's go back to 1.js, that this is a class. So once again, this is a modern syntax that isn't available in all browsers. So if I were to say class foobar, like that, close that out. Well, yes, I can still merge everything together. And that would be fine. So if we take a look, there you go. But now if I run in a production environment, you might get something different. Oh, a syntax error, unexpected token name. So what's happening?

So if we take a look, there you go. But now if I run in a production environment, you might get something different. Oh, a syntax error, unexpected token name. So what's happening? Well, when we run in a production environment, we're using a tool called uglify.js. And this is going to optimize it as best as possible. However, it's not familiar with this modern syntax. So it doesn't know what to do. So you'll see right up here, yeah, we had trouble minifying it. Maybe you want to use mix.babel instead. So like you learned earlier in the video, Babel is simply a tool to compile everything down to convert your modern code into a vanilla approach. So let's give that a shot. Let's go back to webpack.mix. And again, it's the exact same API. Literally, the only difference we're doing behind the scenes is we are applying Babel compilation first. All right, let's give it another run. And now we're all done. Let's come back, take a look. And yeah,

means if you want to do the same thing for stylesheets, you could do mix.styles and then reference your CSS files. So reach for this for basic concatenation. You're not going to get any special webpack functionality behind the scenes because it's separate from webpack. These are just extras. And again, primarily for maintaining legacy projects. Otherwise, stick with mix.js.