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.

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.

Simple usage of Webpack with Typescript

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

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

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.

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:

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/