Using Webpack with Typescript
Tags: webpack, javascript, programming, webdev
Published: 2022-05-13 18:56:47


## What is Webpack all about?

Webpack is a Bundling and building orchestration tool. 
It is a tool that helps to serve optimized projects by bundling, cleaning, and minifying code to reduce the downloadable files and provide one bundled file that has all our code inside it.   

## When to use it?

When working on large projects, We will probably end up with a lot of files in our directory. In addition to that, we will need to export and import these files to connect them together. 

If we take a look at a simple web application that has some files and components. these files and components will be served to the browser separately as shown below. 

![Web without webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hqempnwngs6dc3ue9s8k.png)

Now as these files get bigger in size, they will cause some latency and make the application slower because these components and files make HTTP requests separately. 

Here comes the power of Webpack. It will look into all of the files of the application. It will compress and minify everything, then serve it as shown below. ![web with webpack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f8dja6f8tlfnh9jurp49.png)
 







## Simple usage of Webpack with Typescript

To start off with using Webpack with typescript. Some dependencies should be installed. 

```js
npm i -D webpack webpack-cli ts-loader typescript webpack-dev-server
``` 
These dependencies work hand to hand to compile typescript code to javascript with the help of `ts-loader` and `typescript`, then bundle the js code using `webpack`.
 

__Configuring webpack__

`webpack.config.js` should be created in the root directory. 

The first thing we can do in this config file is specifying the entry file of the application which is usually `app.ts` or `index.ts`

```js
module.exports = {
  entry: './src/app.ts'
}
```

Now we have the entry file setup, we can configure information about how and where this bundle file will be. 
Usually, when compiling typescript code, the compilation will be stored in a folder called `dist` (can be renamed) as we specify that in the `tsconfig.json`. 
Same for Webpack config, it needs to know where to exactly bundle. Therefore we set the absolute path of the bundle destination. 
```js
const path = require('path');

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') 
}
}
```

After setting all that, Webpack needs to know how to compile these typescript files. we can set a simple regular expression for Webpack to find all typescript files. After setting that we specify that `ts-loader` that we installed earlier will handle the compilation to Javascript during the bundling process as the following:


```js
const path = require('path');

module.exports = {
  entry: './src/app.ts',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist') 
},
  module: {
    rules : [
     {
       test: /\/.ts$/, 
       use: 'ts-loader',
       exclude: /node_modules/
  
     }
  ]
}
}
```

We can add different presets for different file extensions when bundling such as CSS files or images by adding rules to the module. 


More to learn about Webpack: https://webpack.js.org/concepts/