Simple Webpack Configuration (JS & PostCSS - Tailwind) | WordPress

sup nerds in today's video I'm going to be going over a very simple web pack configuration we're gonna be going through the step-by-step so you don't really need to know anything about web pack in order for this to be helpful hopefully but we're gonna be going over a configuration that's going to get your javascript compiling as well as some post CSS because we're gonna be integrating tailwind CSS and this because with this because that's what I'm using for an upcoming course so I wanted to kind of show it off here a little bit but hopefully this will be helpful to you if you are new to the channel then subscribe and ring the bell to make sure you get notified of my weekly web development tutorials alright let's jump into it alright so kind of what I want to end up with you guys is something that's going to look like this all we're gonna have is a simple site going and here it's kind of in within the context of WordPress we have a package JSON that's just going to have a start script it's going to have a config file where we have all of our web pack configuration and we're gonna end up with two folders inside of an assets folder a dist folder that's going to have our main bundle j/s as well as our main CSS which is going to have all of tailwind in it and then we have a source folder that is going to be the source for those two places so are those two files so the thing that we just have here just so I can kind of show you that it's working is that we have NPM run start it's going to find the that web pack config file and then it's going to build it and then it's going to actually watch it so when we add new CSS or if we add new JavaScript it will just automatically update and then we'll end up some of something that looks a little bit like this and this is not too glamorous but what it shows is that we have a a compiling JavaScript and we have you know an alert here saying howdy partner and then we have here a tailwind card so just showing that all of the the Tailwind features are working so let's jump right into the code alright so what I have here is in kind of within the context of WordPress a very simple theme we just have a style dot s style dot CSS so we can name the theme index dot PHP with get header and get footer and then a functions PHP function that is actually in queueing our first javascript file so we'll be adding to this and changing it a little bit as we go so what I want to do first out of all of this is actually talk about the package.json so the first thing that we're gonna do is do NPM Annette - why just answer yes to all the questions and it's going to give us our package JSON and so what we need to do from here is we actually need to install web pack so NPM install - capital D web pack space web pack - CLI so this is going to install all the things that actually do all the bundling and then our command-line interface for it as well so once this is done installing we will jump into it alright now that we have those two things installed as you can see right here I want to show you really quick what it looks like right out of the gate so if we just delete that test script and replace it with just a start script that just runs web pack if we were to just do NPM run start it's gonna throw an error and it's going to say can't resolve source so by default web pack is looking for a source directory so let's create that real quick source and we're going to have a file here called index j/s and we're gonna run an alert and we're gonna call this right pass it howdy because that's my version of hello world and we are going to run our script again and instead of an error it's going to give us a warning saying that an OP mode has been a mode hasn't been set and it has been set to production for us which is fine but now instead of just our source and node modules directory we now have a dist directory as well with main dot J s and if we click into that we've got a whole bunch of magic and then our code we have on our alert how do you so what I'm gonna do is gonna have to go just to our page here refresh it and then let's see if we get that howdy so we get howdy so everything is working so far however I'm sure that there's a lot more that we want to do with this so what we're gonna do is we're going to take over the configuration because we want to do a little bit more than what it's doing right now and we'd rather not pass in a bunch of flags and stuff like that to the CLI so we're going to create a new file here called web pack config dot J s and we can name this just about anything we want however if we are going to pass to our start script - - config web Peck dot config GS so it knows where our config file is located but on what it's called rather so the way that every web pack config is going to start out is it's going to start out with a module dot exports and it's going to equal an object and so everything between these two curly brackets is going to kind of tell web pack what magic spell to use so there's a lot of things that you can do with web pack and so I don't want to over complicate it by going down too many rabbit holes but this kind of top layer of this object is going to be kind of global settings for web pack as well as of a main entry point for our JavaScript so the first thing that we're going to tell web pack to do globally is we're going to give it a mode so we can get rid of that warning we're going to set it to development mode because as you can see when we ran it originally it minified everything got rid of any sort of comments and over time it's going to be difficult to read if we need to debug it so we're going to set it to development mode on top of that I'm not a huge fan of having a source and disc kind of floating here in the top of our directory so this is a wordpress theme so I kind of want to obscure those two directories another directory so I'm going to do a new folder called assets and I want to just delete I'm actually not delete I'm going to move source into assets as well as dist into assets as well so that means we're going to have to change a couple things but first we're going to change what's in our functions dot PHP here and it's going to be slash assets then disk then main j/s so that will then correct that so it'll be properly and queued on the wordpress theme but then what we need to do is we need to actually require something out of node so we can change what the directory is so we're going to require path path is something that comes right at a node so we're not installing it with NPM or anything like that and we are going to set a context so context is equal to path dot resolved and then so we're going to give it our dur name so this is going to be what we're currently at and then we're gonna say go into assets and then so it'll just know that's where we're we're going in so we want to go into assets then source then index jeaious it's going to assume sourcing and index J s so then after that we worst now we know kind of where we're starting we need to know where to output so we're going to write output and then it's going to be an object so there's going to be two things that we need to set inside of here the first thing is the file name and we can call this just about whatever we want but we can call it something very simple here called main bundle dot J s and then the path where that exists is going to be path dot resolved we're also going to give it the dur name to our name and then we're going to say assets slash so that's where that's going to end up so now this context is going to assume source index jeaious and then the output is going to change this from Maine Jas to Maine dot bundle but Jas and it's going to put it inside of assets and dist so again let's just change from Maine Jas to main bundle dot Jas and then let's move on so let's actually do one more thing before we we test this out and that's going to be passing in a flag that I find super helpful which is watch true now it used to be a lot more difficult than that but now it's just watch true so that's all you have to pass in order for it to kind of you don't have to keep running npm run start every time that you make a change so let's delete that dist file here our old one let's make a quick change to howdy we're gonna do a little smiley face up after that and then let's run NPM run start so if we typed in everything correctly it looks like it's going to yep it did all of what we was supposed to do and you can see right here webpack is watching and the files can hominis ominously watching the files you can see up here that our bundle is now named bun main bundle dot j s and it is unmended so we're on the right track so technically I mean we're good to go as far as JavaScript goes like there's nothing else that I want to do here we can import files and run them so actually let's just do that really quick we can say let's do a new file called test dot J s and let's export Const let's say man just test cuz you know we're super crazy like that and let's just have a function here and it's going to console.log howdy so we're going to save that and an index J are going to import tests from dot slash tests so let's just do that and run tests so it looks like it has been compiling the file successfully so let's go to our file here we shouldn't get an alert anymore what we should get is now a console log that says howdy and we've got howdy so now we can import our files we can do all the things that we normally would want to do with webpack all right so now that we've gotten that out of the way the next thing that I want to do is I want to get tail wind up and running now with tail wind we need to actually add some more configuration and this is going to be the bulk of our configuration here javascript is obviously pretty darn simple to get up and running but the next thing that we need to add down here is we need to add what are called modules and then some rules for those modules so we're going to start with module and that's going to be an object and then rules which is going to be an array of objects whoops rules is spelled like that so inside of rules you're going to have lots of different objects you're going to have objects in here that are essentially tasks that you want webpack to run and these are going to be things where you pass in options to them and although there's a lot of things that are kind of out of the box with this so the first thing that usually one of these rules will take is it's going to ask you for a regular expression to see what type of file they need to run this task on so the first option is test that's what they're going to be testing for so the the regular expression in this case is just going to be dot CSS and then as a dollar sign we're going to end the regular expression and then we're gonna put a comma so we can go down to the next line so this is the regular expression right here and this is what we're looking for which is a file that ends in very specifically dot CSS the dollar sign is saying the end of the string so that is if that is true then we will have another something run and we're going to use this use object and so with the use object this is where you're starting to use things called loaders and these are kind of the individual tasks that run for any of these CSS files that it finds and so specifically with tailwind tailwind uses post CSS and it uses a CSS loader and a post CSS loader so we need to install a few things in order for that to work so the first thing that we're going to do is quit out of that clear that and we're going to npm install - capital d CSS - loader and post CSS - loader and in order for these to kind of do their thing we're gonna have to do a few more steps inside of here but we're going to just make sure that we have these installed before we move on so let's clear that out and so we're going to have a very kind of interesting time with this oh it's not an object I'm sorry it's an array I have over here my notes that it's an array so this uses as an array and what this is is a list of thing a list of loaders to use and the funny thing about this is that you would think that when these loaders run these tasks that it would run from top to bottom so if I have you know tap you know task 1 then task 2 you would think that task 1 would run before task 2 well task 2 is going to run before task 1 it goes from bottom to top so took my brain for quite a tizzy when I learned that so it was quite it was quite a journey but now that I know it makes sense so the first thing that we're going to want to do is we're going to inside of this array pass in our object and this is the first thing that we're going to give it is a loader and so this loader that we want to do is the first one that's going to run and this is going to be the post CSS loader and what we're going to do with that is pass it a few options so options we're going to give it its identity which is post CSS and we're going to have some plugins that go along with that so the two plugins that we need to run inside of this post CSS loader is going to be autoprefixer and tailwind CSS itself now those two things are actually required specifically by tailwind so if you're not using tailwind you don't have to do this so we're going to do autoprefixer and tailwind CSS and so that's going to install those two plugins for us and so inside of this array we're going to require tailwind CSS and we're going to require autoprefixer those two powers combined we should have a post CSS loader that will work with tailwind so let's just close out of that real quick and so once we've run post CSS on our CSS file the thing that we want to do after that is we want to run it through a CSS loader just the regular CSS loader not post CSS so what this is going to do is this is going to interpret the post CSS and then this next loader is going to interpret that into something that JavaScript can understand so this loader is actually throwing this CSS into web pack and it's going to be loaded through JavaScript which I'll show you in just one second so the next thing that we're going to have is another object and this object loader is going to be CSS loader and it's going to have one option in here and this one is very specific to using post CSS there's import loaders this option takes either a 0 a 1 or a 2 and so 0 is disabled 1 is use post CSS and 2 is like use post CSS and sass or something like that so we're just gonna pass it a 1 I know it's confusing and I know it seems arbitrary but that's the way that you need this to work and with post CSS so once it runs through post CSS it's then going to run it into our CSS loader so let's see what this kind of looks like first and go into our source directory and we're going to do a main dot CSS so now that this hat we have a file in here with dot CSS that means our web pet config is going to pick that up and run through these tasks so let's just grab all I got to grab the little piece from tail end over here just so I don't forget what it is because it asks for very specifically a couple of at Tailwind functions so at tail and base at when components and at tail wind utilities so we're going to save that and we're going to run npm run start now this isn't actually going to output to our page yet i just want to kind of give you a quick tour of what's going on behind the scenes so if we go into our source actually you know what we got to do i forgot this part after import dot slash main dot CSS in order for this to get going just npm run start here and once that's good there we go that's why now it's good it's one point eight nine megabytes so it's a big boy but now let's look at our main bundle here just kind of minimize this for a second and so what we're gonna see here is we've got all of these different classes like dot space - wise - eight and all this kind of stuff this is the entirety of Tailwind inside of our bundle all of a sudden and so what we don't want is for JavaScript to actually inject our CSS into our page because kind of watch what happens is well it might be a little bit difficult to see but it what's gonna happen is it's going to actually have a little bit of a flash of unstyled text we could probably grab something from the Tailwind documentation over here let's grab this like oh let's grab a component let's grab some navigation and we'll describe navigation that logos not going to work but we can grab this whole thing so we're going to go into our index yes here close out those PHP tags and throw in this tailwind component and we can refresh our page so something that went wrong here is that we actually don't have it going from our bundle our main DUP bundle that jeaious to our actual dumb so what we need to do is we actually need to install another loader real quick I know it's loaders on loaders on loaders but if we do NPM install the HD style loader the reason why I forgot this is because we're only using it for like two seconds we're not gonna actually allow the the style loader to live on our site for very long because what that does is it takes that tailwind string that we were just looking at and what it does is it actually just outputs it into a style tag on the page and so that's the part right that's forgot about it because we don't really want it so what we're gonna do is we're gonna go back to our web pet config and right above the CSS load we're gonna do style loader so it's kind of funny how it works it transforms post CSS into you know CSS and the CSS loader actually turns it into something that javascript can understand and then this style loader takes that string and it just outputs it on the page so let's a rerun our start function here and then we can rerun this and now we have our our styled header here however if you kind of like watch me like hard refresh this you can see that we start to get that flash of unstyled text the dreaded flash of unstyled ovens of unstyled text but that's because of what I just said like the the JavaScript is the one that's handling the styles and so your Styles are loading only after JavaScript has finished loading and so once JavaScript to finish loading it injects everything in there and then you then you get everything kind of snaps into place which is super bad ex user experience so that's why we're not going to use the style loader but it makes sense to to show ahead of time so we're going to ask the the style loader here and what we actually need to do is we need to use a plugin so I know that these kind of seemed like plugins but there's actual literal web pack plugins that will take the style loaders job away from it and it will actually extract all that that CSS it will put it into a CSS file that we can then in queue normally so instead of this style loader what we're going to do is we're going to install the mini CSS extract plug-in so npm install dash d mini CSS extract plugin and while this is installing we're going to and/or actually require it so i'm just going to copy and paste that because it's a lot to type out many CSS extract plug-in me and many CSS extract plugin is being required and so this is going to go into two places the first is it's going to be used as a loader so we're going to use the mini ax CSS extract plugin dot loader so it comes with a loader and so you can just do dot loader and it will run like a loader and then right above module here we are going to have our plugins array so this is if you have lots of things that or you know if you use plugins at all you'll have this array as part of it as part of your web pack config and then you're going to do new mini CSS extract plug-in so with those two powers combined what it'll do is it'll take that CSS that's in our main bundle it will actually output something into our dist directory so let's do NPM run start here and make sure that that is working what Peck is watching our files it's going to take a second and now we have a Maine dot CSS so now this has all of the things that have to do with tail and inside of here so that's good news we're going to then kind of in queue this and it won't work over here so let's you know refresh this in it it should kind of crap out on us just let fly we will come back up yep it's not working anymore which is perfect and we go back to my visual studio code and we're gonna do W P and Q style this is going to be main style and then get stylesheet directory you are I probably could have just copied what's above slash assets slash dist slash main dot CSS dependencies just be an array version let's do one point 0.0 and then media for now so with that we should now actually get our tail wind back so now that we have this we'd have now gotten both JavaScript and CSS working so now we have a place where we can you know edit tailwind if we need to edit tailwind we now have index working we can import from other files we're getting them output to our main CSS and there's lots more things we can do too much for this video I'm going to continue this series on next week where we're going to make this a little bit more production-ready because kind of as of right now everything's unmanned looking pretty gross so in next week's video we'll go over how we can optimize this further and add some images to this as well and optimize and compress those images so if you liked the video give it a thumbs up leave me a comment below let me know if I did anything wrong here let me know if this is a better way to go about some of this stuff I'm always looking to learn I want to shout out my patrons up at the top they actually suggested that I cover this topic so shout out to them for being involved and and being supportive so again if you like the video also subscribe to the channel I have do web development tutorials I mainly focus on WordPress but I will do kind of things outside of WordPress every now and again as well but anyway I appreciate the support I appreciate you guys watching and I will see you in the next one [Music]

Channel: WPCasts

Views: 9,654

Rating: 4.9661016 out of 5

Keywords: javascript, tailwind, webpack, webpack config, tailwindCSS, WordPress Webpack

Id: 6DknOk_NrG4

Length: 29min 17sec (1757 seconds)

Published: Wed Jul 01 2020

Reddit Comments

[u/flooronthefour]

You do great stuff man. It's nice to see someone treating WordPress like a modern stack. Cheers

[u/[deleted]]

Hey, just wanted to say I really appreciate the effort you put into these. Very helpful.