Webpack & TypeScript Setup #2 - Webpack Installation

Key Takeaways

alright then gang so I've already opened up vs code and I've got a brand new project a folder called web pack typescript nothing in there at the minute and the first thing I'm gonna do is create or initialize a new typescript project now to do that we say TS c and we need typescript installed globally on our computer in order to do this remember if you don't know how to do that check out the tutorial series all about typescript the link is down below and then double dash and in it and this initialize Azores with a typescript config file right here so inside this config file we can specify different options about how typescript is gonna work the only two things I'm gonna do is change the target property to es6 and that means that the output javascript that we're going to get at the end is going to follow along with the es6 specification and i want to say that the module system that we're going to use is going to be the es 2015 specification as well so that's all I'm going to do inside that config file the next thing I want to do is initialize a package.json file to keep track of all of our dependencies because we need to install a few dependencies for webpack so to do that I'm going to say NPM in it and then press ENTER and then down here I'm just going to enter through all of the different questions it's asking me right here the entry point will be indexed is enter through the rest that's absolutely fine you can fill these in if you wish but for me that's absolutely fine and now we get this package JSON file and whenever we're using NPM to install different packages we typically create this package JSON file first of all to keep track of those dependencies that we install so speaking of dependencies we want to install web pack as a dependency to this project and also a couple of other things as well so to do that we'll say NPM install and it's going to be web pack first of all we also want to install the web pack CLI and that's going to be how we interact with web pack via the command line interface then we want to also install TS loader and that is going to be something that we use later on as well so we want to save all of these to our dev dependencies so that the tracked inside package and to do that we can say - capital D and that saves them to the dev dependencies so webpack that package is going to be the core webpack package that ultimately compiles and bundles all of our code together the web pack CLI is going to be a tool that allows us to run web pack commands from the command line and the TS loader is a package that teaches web pack how to compile typescript into javascript and without it it wouldn't be able to do that so now we can see that we have a node modules folder and a package lock file right there as well now all of the dependencies we just installed are going to live inside this node modules folder we don't need to go in there and edit anything directly that's just where they live now this package lock file just locks in our dependencies for us we don't need to go into that file and do anything with that either but if we go into the package JSON file we can see now we have this property called dev dependencies and that is listing these three packages we just installed right here now you should also install typescript locally for your project as a dev dependency - for web pack to work with it properly even though we have it installed globally on our computer so to do that I'm going to say npm install typescript and then i'm going to add that as a dev dependency - press ENTER to install that local it for this project as a dev dependency so there we go that's that installed as well so this package JSON file is keeping track of all of the dependencies we use as well as store information about other things in our project as well such as the scripts and we'll come to that later on for now though we don't need to do anything more with it so now we've installed web pack and the other package is that we're going to need over the next couple of lessons now let's create a folder structure for our project so the first thing I'm going to do is create a new folder for the source files inside this project so all of our source code is going to live inside this folder right here the typescript files that I'm going to be creating so when I'm writing code for this project I'll only ever be writing code in files inside this source folder that is the source code now I also need to create another folder which is going to contain all of my final JavaScript any final CSS and HTML which will then be ready for deploying to the web so to do that I'm going to create another folder called public but you might also see this being called dist or something else but ultimately this folder will contain all of our final files and it will be the folder upload it to a web server to host the website now it should probably contain at least one HTML file since that is the backbone of a website so what I'm going to do is create a new file inside that called index dot HTML and inside here I'll say doc and tab and that creates me this mini boilerplate and what I'm actually going to do is just copy and paste all of the contents from my repo in here so you don't have to watch me write out HTML so let me paste that in dead-dead simple all this is is an h1 right here then a form with three labels and three inputs one for name one for email and one for age and we have a button at the bottom to submit it now I'm also going to change this title right here to webpack and type script like so and that is our HTML file done so that is pretty much it as far as the initial setup is concerned in fact I will just add one more file inside this source folder right here new file and we'll call this index dot es so remember es is the extension we use for typescript files and all of our typescript files are going to live inside this source folder right so the way this will work is as follows we're gonna write all of our code inside the source folder so anything typescript is going to go inside this source folder right here web pack is then later going to take those files and compile them into a single JavaScript bundle and it's then going to output that single bundle inside the public folder right here so we might have then something like bundled is inside this public folder and that is going to be then ready you deploy to the web and then the index file right here can later link to that bundle jeaious file so now I have the bare-bones set up in the next lesson we're going to create a web pack file to start this whole process