Webpack 5 and Typescript Project Setup Walkthrough

welcome to swashbuckling with code i'm jimmy cleveland and in this episode we are going to be covering a webpack typescript setup from scratch i'm going to be going over every little piece of code and package that you need to install in order to have a basic typescript setup running so that you can feel a little bit more confident about what your project configuration is doing under the hood [Music] we'll start in the terminal here and we're gonna make a directory and i'm just going to name it webpack ts you could make this directory whatever you like and however you like you know if you want to use the editor or whatever that's fine and then we'll just cd into there and then what we're going to do is we're going to init a npm project dash y is to say yes to all the options we don't care about answering them right now and then what we can do is we know that we're going to use webpack so we'll just install that now the i here just as short for install and the dash uppercase d is short for dash dash dev which installs it as a dev dependency and the reason that you're going to want to install it as a dev dependency which you'll pretty much do with all of your build tools typically is because your end result that you're going to ship to the client like it doesn't rely on those packages um so you really just want to use them just to build uh the things and then they're not bundled together in your final output hopefully that makes sense and then um well let's actually just create a file here while we're here and we're going to make a js file to start we'll turn it into a ts file in just a bit and then we might as well just open our our editor of choice here okay who did i do code that was weird okay so now you can see we have our package json we have our lock and then we have our index and so let's just real quick create a age variable and just set it to 99. it doesn't really matter and then we can jump back over to the terminal here and then what we can do is run mpx which comes with all the modern npm installers just a way to either use a local version of something you have or go ahead and grab that real quick and run it from npm's registry so we'll do npx webpack and this is just so you don't have to install it globally and i kind of want to just show how you what what little you need to uh run this so i'm a fan of when i'm trying to learn something i like to go through in sort of like a red green way kind of like tdd if you're familiar with that test driven development and what the red green means is um i want to see the error first and then make it work so rather than install the packages right up in the front like maybe a readme would do or a lot of walkthroughs i want to show you kind of how i go through the process of figuring out what all i need to make this thing run so you know in this instance you can see that when we ran npx webpack it says that you now need uh webpack cli and that's kind of cool that they tell you that so normally when you set this up you would just see the docs saying okay install webpack and webpack cli because you need them and i just like to test them like do i really let's see so yeah we'll say yes cool seems like we do and that's good enough for me okay so then um it finished and you can see that uh we got this module not found can't resolve dot slash source which isn't um the greatest error but it kind of leads you in the right direction so what this is about here is that our index.js is not in the source directory and when you run webpack without a config which a lot of people don't even know that you can do you need to have some defaults in place and one of them is that it's in the source directory so source index.js dot slash source is kind of short for that so now that we've put that in here let's try and run this again npx webpack and it built pretty cool huh so let's jump back over here and you'll see that a dist folder was created for us and then if we go into this we'll see a main now there's nothing in there well that's because we're making a production bundle and we created this variable but it doesn't do anything so if we were to log it for say whoops just type the number in easily goose and then we'll go back and we'll run it again now you have to run this every time you're going to build we'll do a watch mode in a minute but for now you have to run it each time and now you can see in your main js it's going to do console.log the number okay because what it's trying to do is not going to try and build every single line of code that you are writing it's going to build what you need to run your program in the end right now we want to keep running this script so what we're gonna do is we'll make a script called build uh in our package json and then we'll just run red webpack just like we did before all right and then now whenever we wanna run this we can just do npm run build and that'll do the same thing as our npx thing that's just so that it's actually local in our project now we're going to change our index js to a ts file okay and then we're going to do the same thing we're going to come back here we're going to try and run it and you're going to see that it fails so uh the error here is the same that we just got before so that just kind of clue us in now that we've solved that it can't seem to find that file all right well that is because what we need at this point is a webpack config if we want to actually use a ts file so if we make a new file in the root of our project we can name it webpack.config.js and that's your default there and then this is just going to be module.exports and you're going to export a sort of a config option here now what you need the minimum that you're going to need for this is actually just to resolve that file extension surprisingly you don't even need a loader at this point so extensions is going to be [Music] ts and js so we're saying what i want you to resolve or look for is anything that ends in ts or dot js because if by default it's just going to look for those js files okay and now if we come back over here and we run this again you can see that we got a build all right well let's check it out did it work yes it did pretty normal right now we're not writing any typescript code just yet so let's add some typescript syntax here so we'll say that this is a type of a number and then we will run this and now we get a different error here we get this unexpected token and this is where it actually happens so it's nice enough to show us that and it gives us sort of a hint you may need an appropriate loader to handle this file that is correct i wish it would try to steer you a little bit more toward like what kind it is but that's probably pretty hard just from you know a random token error so that's all right so what we need right now is we want to run npm i d ts loader that's the loader that we want and then we'll just jump right back over to here and if we go to our webpack config we actually need to set up our loader now so this is a little bit more involved but this is pretty much the normal song and dance for webpack so once you get this down it'll just make your life a lot easier so what we're going to have is a module type and that module has rules and that rules is typically an array of objects and then here we have a test and so what i'm going to do is i'm going to write a regular expression here and i'll explain that in just a second and then we'll say what do we want to exclude because we need to say that we don't want to run this on node modules we don't want to run it on other people's code at all other packages that we're using and then the last property that we need is the loader that we're going to use so we could do loader ts loader okay and then we're going to need a comma down here and we're good so what we've written here is we're saying okay when you're processing any of my code webpack these are the rules that i want you to go by now the test is what you're testing files again so it's saying hey if there's ever a ts file because this regular expression is capturing anything that's ends in dot ts this dollar sign says ends in that character there and then we don't want to run on node modules and this is the loader that you're going to use cool that's it now let's come back and run this one more time npm run build whoa we got a big old error here all right cannot find module typescript all right well that's pretty simple right we'll just do npmi dash t or dash d uh type script and then we're gonna run it again just to see if it'll run okay now we have another error no worries we're making progress here and we're kind of figuring out exactly what we need as we go along so we can see that ts loader requires a typescript to run and then now it says the files list in the config file ts config.json is empty when i first encountered this it got me for a while this is a terrible error uh hit it really i don't understand why they can't just tell you this but really what they're trying to get at is you need a ts config json and this happened to me one time because i actually just misnamed it so the whole the files list and the config is a bit confusing for that now let me show you how you can get a ts fig going config going pretty easily so if you run we'll use npx again there's a tsc here and that's for the typescript compiler and you can do dash dash and knit and what that will do is create a ts config in your project so let's go over here and look at that now and that it created this file and you can see it's got all of these options some of them are just here automatically and a bunch of them are commented out which is really cool because it's just showing you the defaults so for instance uh no implicit any is by default set to true so you could turn it on and we will in a moment to like disable that or change some settings if you want but let's just go with the basics here okay so now let's try to npm run build and again and see if it'll work boom okay we got some output sick so now if we go to main js you will see uh that we got our output like usual it's getting a little bit harder to read nothing crazy here of course we can read it because the code's so short but let's say that we actually want to be able to to read it as we go along so if we go into this webpack config there's another option we can add in here and this is what's kind of cool about the not needing a config a config less setup is that you can just add things as you need them and we can set this to development as the mode because by default it's production and then when we do this what will happen is when we run this build and we go back to our main js we will see a completely different format okay and this is close to what we want but there's some weird stuff here but check out this nice little comment they've given us the eval dev tool has been used maybe by default in mode development yes we are in that and this dev tool is not neither made for production nor for readable output files in the end basically what they're kind of pointing us to is that we can disable this by doing dev2 tool false or setting that to some other dev tool configuration that they give us a nice link to so let's come down here and say devtool all right turn that off no dev tooling let's run our build again come back to our main js and there we go okay so now we have a nice little readable output that we can compare and see what our stuff is actually being built into in the end and now you'll notice that our typescript is actually just being compiled to regular old javascript right so that's pretty sweet so that's working fine for us for now let's actually set up a watch script now so that we can make some changes and see the code change on the fly so there's a couple things that you patterns that you could follow here i like to just do the colon pattern here um and say well build colon watch is the mode that i want and in this case i want webpack dash dash watch and this just comes with it so it's really nice and then if we come back over to here we can say npm run build on watch oops typo and so what that is going to do now is watch for any time that we change any of our ts files um so now come back over to here and let's actually change some stuff and write some typescript here so if we were to do let's say we'll make a function i'm going to call it woof and woof takes in a noise and that noise we're going to console.log it all right and what you're going to notice here let's go back over to the terminal because it's actually going to typescript's already kicking in here with its linter that's saying uh implicitly has the any type which we don't allow by default in the config and we're getting that uh intellisense in our vs code right away which is really sweet so it's saying yeah you can't do implicitly any now what's kind of weird to me though about this is that if you look over on the side here you can see that our output is there and if i were to just like remove this let's say and save you can see the out output updates even though i'm technically building an error here but if you were to run mp npm run uh build and so not putting it in watch mode you'll see that we actually get a failure on the build which is what we would want in typescript so just so that you know so let's actually change that in our config here so if we go over to our webpack actually our ts config sorry and we can go to this known plus at any and what we'll do is we'll set that to false and so now the interesting thing is that this will pick it up right away vs code will not be yelling at us anymore about that not being true there but also if we restart our build it will actually build properly so you can see that it's using the ts config to determine some of the rules that typescript wants to set up okay so let's flip that back on though because we are going to want that and you can actually just re-comment this if you want if you if you just want to do it that way but it's nice to leave it you know set to true so that you know the defaults in case you forget so now let's go back to watch mode watch here and we'll get that error and that's fine because we're going to fix it in a moment we're going to be bad kids and actually write any here okay and i've got a reason for this but typically of course you want to avoid any and typescript if you can so why we're going to leave that any now is for my illustration purposes what we're going to do is we're going to create a object so we can get some real cool typescript functionality going on here so you can see that it's building more than just the simple types so if we create this object um we're gonna make it a nested object here so i'm just making up some random keys for fun and then we're going to do an awoo since we've got our dog noise here and then you can see all this code is being built out here now remember what i said before we've switched it to development so it's actually printing out our code if we were to switch it back to production mode all of this is going to go away and just the final output is going to be there just as a quick reminder now here what we want to do is say call the wolf function and we're going to pass it object okay and you can see that getting called and then what i'm going to do right here is i'm going to open up my terminal down here cd into this directory because it didn't think that it could be cool enough to do that for me and then uh we'll run node and we'll go into the disk folder and we'll run our actually it's main.js isn't it and there you go uh you can see it running our code and run and just printing out this object all right great but that's not quite what we want yet i'm going to get rid of this log here now just to clean this up and then what i want to do is say okay well what if we were to call noise.1.2.3 and then run that instead and so now if we run this we'll see we get our string printed out but what if we weren't going to pass that in okay what if we passed in like null here let's say all right when we run that we're going to get an error okay and i'm just opening this in this terminal just so that you can see it in line here our webpack is still running in the background every time we change on the other terminal sorry so uh one two console.log you know pretty pretty standard issue here right like we tried to run a property or call a property on something that doesn't exist on undefined cannot read property one of null in this instance so okay how would we normally solve this well if we um weren't in let's say typescript here we would do noise uh this is one way noise.1 noise.1.2 everyone hates this world right noise.1.2 dot three uh we checked one two three i even got to look it over and then now let's try and run this and we'll just get null so at least we don't get an error right get what we expected here and then you'll see in our output on the side that we have just a bunch of ands it's just normal javascript just the way that we wrote it but what we could do instead is we could do why can i not type noise and we can use the optional chaining functionality built into this this is actually in the latest version of ecmascript as well but typescript's had it for a little while and we're going to show it generating that out with typescript so we can do is say does noise exist okay well then access this property what about that one okay the next one what about that one all right the last one through three and then now we run this boom you can see that we get this null and undefined they're a little bit different and i'll talk about why if you come over to here let's bring this over here a little bit got some stuff on the way you'll notice that the first one that we wrote is a little bit different than this one and it's kind of interesting huh there's this very long set of like void code actually i'll make it a little bit longer so you can see it this way you know doing multiple different checks with ors and ternary here okay so why is this this is actually by design the optional chaining is trying to be a little bit more robust and reliable here because if you were to type in just zero here and run this code what's going to happen is you'll notice that 0 got printed out in this check and then undefined was was printed out in this one and typically what you would have wanted was undefined you're saying hey if you don't have any of those properties don't just break but just return undefined to me but the thing about it is zero in a double ampersand check actually returns the value because this first value that does exist it's zero and that'll be the same with like an empty string and some others that just wouldn't give you the behavior that you would normally expect and it's kind of hard to troubleshoot so that is optional chaining and at this point you have a typescript setup working which is pretty cool you can see it transpiling here and you can see it line by line in watch mode if you're curious about what it's kind of doing under the hood and i don't understand as a quick note uh you know all the code that's being generated out of course i just like to peek under the hood every now and then to get rid of a little bit of anxiety of like the mystery of what webpack's doing it's kind of cool to see what it does under the hood uh just to get a quick gist of it and then i can you know move on with my life feeling a little bit more confident so we're pretty good here at this point uh i'll give you one last little piece here to make this a little bit more flexible for you what you can do here for this mode because you might want to switch back and forth between production and development now you don't even have to put anything if you want production just as a reminder let's go back over to the terminal here and stop this build because whenever you change the webpack config you do have to rerun this and we'll just run a regular build here and then what i want to show is the output is going to go back to this minified version that you'd want for your final output okay and i'm going to close this for a moment so to go between those easily you can do something this simple you can say oops you can actually access process.env dot and then typically you're going to use node e and v here and you can say if that's passed in i want you to use that otherwise i want you to default to production okay and now what we can do is we can say all right let's set our node env here and we'll set it to development actually let's not set it the first time just so you can see that so if i just run npm run build now and go back to here our code will just be run in production mode just so that you can see that it works and then now we'll set node env equal to development and we'll do npm run build and we'll go back over to here again and you'll see it ran it in this mode and just so that in case you're wondering oh well what if we just passed something non that okay well typically your system shouldn't be doing that but if you did happen to do you know woofers or something like that here and then do npm run build you'll see that you get an error it'll tell you uh we expect the development production or none so it's pretty nice um that that that's the gist of it and then now if you want to just set up some scripts where you set node e and v or however you like to do it in your system you've got a little bit more flexible config now of course there are a bunch of other rules that you can set in the webpack config you can find those in the docs or i actually have a video that more thoroughly goes through webpack trying to understand the basics of it and it covers like source maps and having a webpack dev server uh entry and output points and all that type of stuff so i'll link that in the description and a little notification card in case you're interested in that and i'll probably be doing some uh future videos pretty soon about the different types of loaders like probably doing style sheets sas and all that type of stuff in the next set of videos so if you're interested in that please like and subscribe and i'll see you on those videos

Channel: Swashbuckling with Code

Views: 5,460

Keywords:

Id: 4lpmVZdj12g

Length: 23min 16sec (1396 seconds)

Published: Thu Dec 17 2020