Customizing webpack.mix.js0:00
At this point, our custom preset will clean out the sass directory and update your package.json file to look like this. But what about other things? For example, let's go to webpack.mix.js. Here's what we get out of the box, right? Maybe that's not what you want. So why don't we mold this and then save it as a stub? So maybe you don't need this, and you want to say, yes, I want to compile our JavaScript, our sass. That all looks good.
our sass. That all looks good. Now for a Laravel project, public is the default output directory, so you can even remove that if you wish. Now you'll remember, if I switch back to our presets, right here, we reference Laravel Mix Tailwind as a custom preset. So let's go ahead and reference that. And then down here, we'll say .tailwind. OK, so maybe this is what I want my base webpack.mix.js file to look like. All right, so I'm going to copy that.
Creating stub files0:52
OK, so maybe this is what I want my base webpack.mix.js file to look like. All right, so I'm going to copy that. I'll bring it back to how it was initially. And now, in my laracast directory, I'm going to add a new folder here called Stubs. Think of these as little stubs, little text placeholders that we can copy around. We'll create webpack.mix.js and paste this in. And now we have that. OK, now we can switch back to our preset class, and we'll call a new one here, StaticUpdateMix. We'll add it here. And once again, these are basic static functions.
Copying stub into project1:25
We'll add it here. And once again, these are basic static functions. Now we could use file_copy, or I think the php copy function is perfectly fine. So we want the current directory, and then Stubs, webpack.mix.js, and I'm going to move that to, or copy that to, our base path of the project. And that file name, of course, is webpack.mix.js. All right, let's give it a shot. So one more time, we run it. And now if I switch over, it should copy and replace the default. So one more time, here's what we had originally, but we now run our preset, and this is what
Adding JavaScript stubs1:55
And now if I switch over, it should copy and replace the default. So one more time, here's what we had originally, but we now run our preset, and this is what we have now. OK, let's do one more together. So we'll go back into our JavaScript directory. We'll get rid of that. So why don't we copy this. We're going to build up some of our own stubs here. This will be app.js. I'll paste that in, and this is how I want it to look, or of course, whatever you need.
This will be app.js. I'll paste that in, and this is how I want it to look, or of course, whatever you need to add here. We'll save that. Next, for the bootstrap.js file, yeah, we're going to tweak this as well, because we won't be using either of those, or jQuery. I do use Axios, though, so this is helpful. Setting the token is fine. Now Laravel Echo, very useful, but I wouldn't immediately use it for every new project, so I'll pull that in when I need it.
Updating preset scripts2:42
Now Laravel Echo, very useful, but I wouldn't immediately use it for every new project, so I'll pull that in when I need it. OK, so it looks like this is how I want my default bootstrap to look. All right. laracasts, source, stubs, bootstrap.js. So we're just creating files that represent how we want our base structure to appear. All right, we'll close all of this out. Now, back to our preset, we can say static update scripts. All right, scroll down here. update scripts, and once again, that's a static function.
All right, scroll down here. Update scripts, and once again, that's a static function. All right, so we'll just pull in our copy file. We're going to move app.js to the resource path, and then assets.js, app.js, and then another one for bootstrap.js. All right, so we give it another run, and now if I switch over, it's working. This is our new app.js. This is our new bootstrap.js. OK, so now that we have a base preset in order, of course, you can continue working on this on your own to get exactly the structure you want.
