#91 Adding TypeScript Support to Webpack | Introduction to Webpack | A Complete TypeScript Course

in the last lecture we changed some configuration in tsconfig Json file and we also added a new configuration file for webpack so if I go to vs code we have added this webpack doc config.js file which is the configuration file for webpack now keep in mind that this file name should be same because by default for the configuration webpack is going to look for this file with this name now here we have specified what should be the sour directory and what should be the output directory but we also need to tell webpack what it has to do with the typescript file for that I'm going to add another property here which is module again it is going to be an object using this module property we tell web pack how to work with the file it finds for example how to deal with the entry file in our case the entry file is app. TS file so how it has to deal with that file and how it has to import it inside this we need to add another property called rules which is going to be an array and in that array we can specify multiple Rules by using an object okay so using rules we can specify what to do with the found file we can specify multiple rules for different types of file for example in a complex project you might also want to tell weback what to do with CSS files images Etc and that we can do by using Rules by specifying object and then specifying the type type of file and what webpack should do with that type of file okay now here we are not interested in CSS file or images here we are simply interested in TS file so in here we are going to add a rule and there we will specify a property called test this test property here it describes the test that weback will perform on any file it finds to find out if this rules applies on that file or not so for example here for the test we are going to specify what typee of file it should look for and for that first of all we are going to use slash two slashes actually inside that we going to use a backs slash and there we will specify the file extension which is dots and then we will use dollar to tell that it has to look for this dots file globally globally in the project okay next we are going to use this use property and also here we are using regular expression to tell webpack what type of file it has to look for so using these slashes we writing a regular expression okay then we are using this use property and using this Ed property we are going to assign it with TS loader so this TS loader is a dependency is a thirdparty package which we installed in our previous lecture so this here it tells Feb pack that it has to use TS loader whenever a TS file is found and then once the TS loader is loaded loed it knows what to do with the TS file the TS loader it will then automatically takes tsconfig Json file in account and then the typescript compiler will do its job once the TS loader has loaded TSC config.js file so basically here we are telling webpack that in order to compile this TS file it needs to use this TS loader and this TS loader will then take care of compiling the typescript file into JavaScript and before compiling it will also take TS config.js file in account and finally if we have any TS file in this node modules folder we don't want to do anything with that typescript file we don't want to compile that typescript file and generate a bundle for that so we also going to use this excludes folder I mean this excludes property where we are going to specify what do we want to exclude during the compilation so again here we are going to use this back/ and there we will specify nodecore modules and the property here should be exclude all right so here we are only going to add one rule and with that we need to add one more extra configuration here and there we will tell which file extension it should add to import if you remember we have removed JS extension from the imported files so by default webpack will only look for JS file but here we also want to tell weback to look forts file as well so that it will also import TS file and it will also bundle dots file right for that we are going to add another property called resolve to this we are going to assign an array and in there we will specify that it has to look for TS file and JS file let's save this file and now finally let's go to TSC config.js file there let's look for Source map and here we have the source map let's uncomment this and we need to set it to true we setting this Source map to true because this will help us debug our code in browser let's save this and then in the webpack doc config.js file we are also going to add one more key so here let me go ahe and let me add one more key which is Dev tool and to this we are going to specify inline Source map okay so just enabling Source map in TS config.js file is not enough we also need to use this key assigned with this value in order to enable debugging our code in browser and with this now we should be able to use webpack now the question is how do we use it a simple way of using web pack is to go to package.json file so let me open package.json file here there we have this scripts tag right in that scripts tag in that scripts property we are going to add one more property which is build and now we want to build this project using webpack so to this build we are going to assign web pack okay so this is the change we need to do here and now let's go to our destination folder currently in there we have these folders where we have some js files so what I'm going to do is I'm going to delete all these files from here all these files and folders I will delete from here and now the disc folder is empty now in order to compile this code using web pack we are going to run npm run and then build so when we are running this build command we have a script with this name here so internally it is going to use weback to build this project project if I press enter we have some errors let's check what is the error okay here we have an error and it says webpack has been initialized using a configuration object that does not match API schema configuration. resolve should be an object so here we have the resolve and actually let me cut it from here so this resolve should be an object in that object we should have extensions property and that should be assigned with that array let me save the changes again and let's try to again run npm run build and now the build is successful we can see one warning but we can ignore that but the code has been compiled so now if we go to the destination folder there we should have this bundle.js file so this bundle.js file it has been created by webpack so weback compiled our typescript code it bundled all the compiled code into a single JavaScript file called bundle.js and it created it inside this disc folder So based on the configuration which we have provided in this webc config.js the entry and output locations based on that it has created this bundle.js file and it stored it inside this folder inside this output folder now all we have to do is we have to open our index.js file sorry index.html file and there instead of pointing to app.js since we don't have app.js anymore we are going to point to bundle.js and with this let's save the changes so here you can see user JS file executed so we can see this message from this file this user. TS file there we have this console.log statement we can see that message here but we also have some logs in app.js so these console. logs we are not seeing okay so in the next lecture what we are going to do is instead of using this development server so basically this development server we have got from the vs code extension which we are using basically this live server so this is the extension we are using to run our application in the live development server but instead of using this development server in the next lecture we will set up web pack and weback will give us a live development server where we will run our project so let's do that in our next lecture and of course here if you see there is a debugger added as you can see let me go to Source tab here and here we have this debugger because of that it is not continuing so let me remove this debugger and let's click on continue here it has continued and in the console you can see those log messages also so since we have had a debugger added in this Source that's why it was continuously reloading but now it is working once we have removed the debugger now we can see all the results but in the next lecture instead of using this development server we are going to use a live development server provided by webpack because if you remember we also installed one of the packages let me open package.json file so we have installed this webpack Dev server package which will give us a live development server so we are going to set up this webpack Dev server in our next lecture this is all from this lecture if you have any questions then feel free to ask it thank you for listening and have a great day

Channel: procademy

Views: 197

Keywords: typescript, data types, configuration, classes, objects, ES6 features, decorators, tupescript tutorial, complete typescript course

Id: Igp4S2FYQRI

Length: 10min 49sec (649 seconds)

Published: Tue Jul 09 2024