Motivation: simplify Webpack 0:00I'm going to show you something brand new in this episode. But before I do that, I want you to think back on everything we had to do in the last episode. It was a lot. Now, the sad reality of the front-end ecosystem as a whole is that it's pretty overwhelming to newcomers. There's just so many steps to follow. And if it doesn't feel that way to you, it's just because you've gotten used to it. But for anyone coming into it on the outside, it almost feels like you're hit over the head. There's so many things to memorize.But for anyone coming into it on the outside, it almost feels like you're hit over the head. There's so many things to memorize. Now, the silver lining, though, if we take something like Webpack, for example, is that once you get over that initial learning curve, it's unbelievably powerful. And that's exactly why we recommend it. But now, if we think about making it as approachable as possible, you want to start a new project and immediately get up and running without having to recreate this file or copy and paste it from a gist, without having to once again research which Babel plugins you need and which Babel preset you need and how to create the Babel RC file and what should go in there. Those are the things you have to do for every project.which Babel preset you need and how to create the Babel RC file and what should go in there. Those are the things you have to do for every project. What if we didn't even have to think about it? Instead, we tackle the 80% of users who just want to compile some JavaScript, they want to extract some SAS, they want a version, some assets, and that's about it, right? We're going to make them as happy as possible. And then if you do need to modify your Webpack file yourself and configure it yourself, you can still do that. Well, I think we have a solution for you called LayerFileMix. Take a look. Introducing Laravel Mix 1:28Well, I think we have a solution for you called LayerFileMix. Take a look. I'm going to pull it in through NPM, and I want you to think of this as a layer on top of Webpack. It's like a configuration layer that simplifies all of the interaction and the interface for you, and then behind the scenes, it'll set everything up for you. Okay, so that means our Webpack config file from the last episode, I'm just going to delete it completely. In its place, we'll see a Webpack.mix.js file. And I expect this to be included with LayerFile 5.4 projects.In its place, we'll see a Webpack.mix.js file. And I expect this to be included with LayerFile 5.4 projects. Until then, you can manually create it. So let's take a look. We are requiring LayerFileMix, and now we're just using a simple, elegant API here. I want to compile some JavaScript, and here's my entry point, and here's my exit point, or the output point. In other words, compile this file to public.js, and then it will adopt the current file name. Next, compile my SAS, once again to the CSS directory. So let's just delete the JS folder so we can start from scratch. Running via NPM scripts 2:24Next, compile my SAS, once again to the CSS directory. So let's just delete the JS folder so we can start from scratch. And now, before we run it, I want you to take a look at this package.json file. You'll see that we have some NPM scripts here. Once again, at the time of this recording, you won't see this in a fresh install of LayerFile, but I expect them to be included with 5.4. So let's just take a look at, let's keep it simple, just this one here. We're going to set the node environment to development. We're triggering Webpack. We want progress.We're triggering Webpack. We want progress. We don't want to see those modules that we talked about in the last episode. But then here, we're specifying a path to LayerFileMix's Webpack configuration file. So we're going to let LayerFileMix handle the Webpack config file, and then once again, if you do need more configuration and you want to be in control of that, all you'd have to do is copy it. Node modules, LayerFileMix, setup. We're just going to grab that and copy it to our project root. And now, we're on our way.We're just going to grab that and copy it to our project root. And now, we're on our way. We can configure this as needed. So that takes care of the 10 or 20 percent of users who need to configure it precisely to their application. But then the 80 percent of users who just want the basics, they never even have to think about it. It's pretty nice, I think. So let's try it out. We're going to compile this down. Multiple bundles and versioning 3:41So let's try it out. We're going to compile this down. And we're done. We now have a CSS app CSS file. That's our compiled SAS. And then we have our compiled JavaScript. But now, what if we had other files? For example, we're going to compile down app.js, but maybe there's also a forum or something along those lines. And we'll just say alert forum.along those lines. And we'll just say alert forum. Okay, well now it looks like we need two different bundles. One for the main application, and then another one that's only relevant for the forum. So we don't want to bundle it together. Okay, back to webpack.mix. And we're just going to duplicate this. Now we're going to compile forum down. All right, let's give it another go. And now you'll see that we have two different exit points.All right, let's give it another go. And now you'll see that we have two different exit points. We have app.js as well as forum.js. On the other hand, maybe we have two entry points, but we can bundle them up together. Okay, well in that case, we could just pass an array to mix.js. So we're going to compile both of these. Now when you pass an array, they will be merged into a single bundle. Let's run it again. Okay, come back. Now we have app.js that contains both the main app as well as the forum.Okay, come back. Now we have app.js that contains both the main app as well as the forum. Useful. Let's undo this a couple steps to keep it simple. Now what if we want to version or hash the files? Okay, mixed up version. If we run this again, now you'll see that a unique hash will be applied to all of the file names. And that way, we can let our server cache these scripts and style sheets as long as possible.And that way, we can let our server cache these scripts and style sheets as long as possible. But if we make a change, well, it will automatically create a new hash, which will then bust the cache once pushed to your server. Now, we're not going to cover the full API, but there's so many things you could do. If you want to copy some files from one location to another, maybe you need to minify something or concatenate things that are not part of your initial bundle. All of that can be done. Production builds and minification 5:35concatenate things that are not part of your initial bundle. All of that can be done. But I think you'll find you won't need to reference those too much. And here's why. If we go back to package.json, so far, we've been compiling a local bundle. But for production, well, we want to minify the assets, right? So for example, this is the full version, but for production, you want that minified to be as small as possible. So once again, back to package.json, if we run npm run production, all that's going to do is basically the exact same thing, butSo once again, back to package.json, if we run npm run production, all that's going to do is basically the exact same thing, but update the node environment. Let's give it a shot, npm run production. We're going to build this up. And now, if we take a look at it, it's going to make sure, for example, if you're using Vue, that it removes any warnings or console.logs, and it will minify the output. So notice all of the basics, the 80% needs are taken care of for Vue with the most minimal amount of code. Vue support and watching 6:24So notice all of the basics, the 80% needs are taken care of for Vue with the most minimal amount of code. And what's even better is layer about mix gets to be mildly opinionated. So for example, if you like Vue as much as we do, well, we have some resources to make it that much easier to work with. For example, let's go to app.js, we're going to import Vue. And notice I'm using ECMAScript 2015 code here, no problem. We're going to build up a new Vue instance, bind it to the app element. And then I will pass in maybe a notification component. All right, let's pull that in.And then I will pass in maybe a notification component. All right, let's pull that in. Import notification from, and I'll store this within a components folder. All right, let's go ahead and create that. Resources, assets.js, components, notification. So what's nice is layer of all mix through Vue Loader has complete awareness and understanding of .vue files. For example, we'll have a template, and we'll say div notification, where we can spit out a quick notification message. So there's our template, we're going to have our script, andwhere we can spit out a quick notification message. So there's our template, we're going to have our script, and I'm just going to hard code the message. So let's say message is hello world. Finally, if you want, you could even put your styling within here. And you could even say I want to use Sass here, or SCSS if we want. Now we could say notification, and we'll just set a background color of green to be perfectly obvious. Okay, so we have a .vue file, but you didn't have to research which loaders to pull in, you didn't have to grab Babel or anything of the sort.Okay, so we have a .vue file, but you didn't have to research which loaders to pull in, you didn't have to grab Babel or anything of the sort. Everything will simply work out of the box. Okay, so let's clear these out and give it another try. And this time, we won't bother versioning the files. All right, npm run webpack, and we're done. We've bundled up our JavaScript, and we are now using .vue files. So let's just go to a view here. And at the bottom, we're going to import our new file, js app.js. And also, we can grab the CSS file.And at the bottom, we're going to import our new file, js app.js. And also, we can grab the CSS file. Next, we'll say within our main root div that view can recognize, we're going to have our notification component. And we can view this in the browser. And there we go. The ugliest possible notification component you could possibly design. But everything's working now. And even better, I can do things like this, npm run dev, and this will be our watcher.And even better, I can do things like this, npm run dev, and this will be our watcher. So let's try it out. Let's go back to Sublime, and we're going to say, for the notification component, we're going to use something a bit more subtle. Save it, it will automatically compile down. So if we come back and give it a refresh, we can see that those changes have been reflected. And the same, of course, will be true for any of the SASS you write, if you want that to be separate.And the same, of course, will be true for any of the SASS you write, if you want that to be separate. Let's change that to Hardcore Black. Give it a refresh, and there we go. So give it all a shot, and I think you're going to like this. Remember, to accomplish everything we just did, we installed Laravel Mix, and we wrote, in this case, two lines of code. Very, very simple. And just remember, if you do have greater requirements and need custom loaders, that's when you can copy over the webpack.config file from this project, andAnd just remember, if you do have greater requirements and need custom loaders, that's when you can copy over the webpack.config file from this project, and then you tweak it exactly to your needs. So something like this. All right, now we have the webpack.config file, and you can see that we're referencing Laravel Mix in a number of places. But if we come down to Rules, and you need to add a new rule, then you just update this as needed. It's very, very simple. But just note, if you do this, don't forget to update your npm script,It's very, very simple. But just note, if you do this, don't forget to update your npm script, because you're no longer pointing to our webpack file, you're going to use yours. So we can leave off that option entirely. All right, so have fun.
