Typescript Tutorials: Webpack Typescript Configuration
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 
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
Thanks
Smartcodehub ™ Blog
Place your ads here contact neerajdana9@gmail.com now
