Typescript Tutorials: Webpack Typescript Configuration

Angular Jun 25, 2019

In this Typescript tutorial two technologies webpack typescript we will try to use them together from scratch

Step 1: npm initialization

first, we will need a project which is empty yes totally empty

 npm init

Typescript tutorials: webpack typescript Configuration

then we will first initialize npm in there as we will be requiring some of the dependencies so we will run
this cmd will generate a package.json file for us

 npm init

Step 2: installing typescript

now there are two choices for us we can install typescript globally or locally where we have our project so we will install typescript first

 npm install typescript

Step 3: Initializing typescript

Once we have typescript install we will initialize our typescript by running this will create a tsconfig.json file where we have plenty of option to configure the typescript behavior in our application

 tsc --init

Step 4: Installing webpack, webpack-dev-server, ts-loader, and webpack-cli

now we will install all the dependencies related to web pack so we will be installing them in one shot by running
it will take some time and install all the packages for us and will update the package .json file for us with some new dependencies

 npm i webpack webpack-cli webpack-dev-server ts-loader --save

Step 5: update scripts of package.json

in package.json update the script section add a new script

 "serve":"webpack-dev-server"

Step 6: Webpack configuration

now we will create one js file and name it as webpack.config.js and do this configuration in that

 module.exports = { 
    entry: "./main.ts",    
    output: {      
       filename: "bundle.js"    
    },  
    resolve: {      
           extensions: [ ".ts", ".js"]     
     },
     module: {      
        rules: [          
                  { test: /\.ts?$/, loader: "ts-loader" }  
                 ]   
      } 
}

Note main.ts is the entry file for your project in my case it is main.ts where you will write your typescript code
now create an index.html and have this content over their

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Tyupescript Webpack configuration</title>
  </head>
  <body>
    <script src="bundle.js"></script>
  </body>
</html>

Step 7: test your application

now all set go to terminal and run webpack-dev-server once it compiles go to the port which it shows in your terminal and that's it you have successfully integrated webpack typescript together