Webpack & TypeScript Setup #1 - Introduction

Key Takeaways

hey gang and welcome to your very first webpack with typescript tutorial now just really quickly before we start the tutorial for those of you who want to support the channel and join the gang officially you can do by clicking that join button right here is just in 99 cents or pence per month and you get these cool little ninja loyalty badges next to your name in the comments down below when you leave a comment you can also join by clicking the button right beneath the video if you're watching one now which I'm guessing you are it does exactly the same thing alright so now that's at the way let's get on with the tutorial alright then going so in this series I'm going to show you how to set up a decent development workflow from scratch using webpack and typescript and we're not going to use any kind of framework or library like view or react either just plain old whip pack and typescript so we're gonna see how to use webpack to compile typescript into javascript we're also going to see how to bundle all of our source code into a single javascript output file already for deployments we're going to learn how to use a web pack development server to preview all of our work in a browser on the fly as we're creating our project and finally we're also going to learn about modules and source maps to now I'm not assuming you know anything it's all about web pack you can be a complete beginner but I am assuming you already know at least the basics of typescript before starting this course now if you want to learn typescript first which I strongly suggest that you do definitely check out my typescript tutorial series right here on this YouTube channel the link is gonna be all right and down below so first things first what is web pack well basically web pack is a bundling tool and it's there to help us with our development workflow now that basically means that it can be used to bundle up all of our source files and code into a web optimized output folder already for distribution now it can be used for many many different types of projects whereby code is somehow compiled or bundled before being deployed such as for example a react project where we writes JSX templates and that JSX needs to be compiled into a regular JavaScript before it's been served to the browser or maybe we have JavaScript code which is split up into different modules and all of that needs to be compiled into a single output file before being served to the browser as well or even things like SAS which needs to be compiled into a regular CSS before it's loaded in the browser so web pack can be used for many different things inside our projects now in this series we'll mainly be using webpack to compile our typescript code into JavaScript but I'm also going to show you how we can implement modules which are then going to be packaged up into a single optimized JavaScript bundle file ready for deployment and I'll also show you how to use the web pack live development server to preview your work as you code so the by the end of this series you should be able to put together a good workflow for any types great projects that you might work on in the future with web pack so like I said my friends you'll already need to know the basics of typescript before you start this course and also have typescript installed on your computer as well now to do that all you need to do is run this command in a terminal NPM install - g2 install it globally typescript now to do this you'll also need node installed because we're using the node package manager now if all of this is news to you and you don't know how to do any of that definitely check out my typescript tutorial series right here on YouTube first of all the link is going to be right down below you're also going to need a good text editor I'm using a Visual Studio code which is really nice and it comes with typescript support out of the box but you can choose whichever one you prefer and then finally I've created course files for every single lesson in this playlist the right here on the web pack and typescript repo and this link is going to be right down below now every lesson has its own branch right here in its own code so if you want to see the code for lesson 4 for example just select the lesson 4 branch and it's all going to be a right here so then there we go my friends in the next video we're going to start by installing and setting up web pack [Music]