Webpack is one of the most commonly used ways to automate workflow when working with JavaScript and web development. Its main purpose is to bundle, but it can do many sequential steps, such as compiling TypeScript. Similarly to Grunt and Gulp, webpack has two loaders (similar to a plugin) for TypeScript. One is called ts-loader and the second awesome-typescript-loader. While with Grunt and Gulp, it was a clear which one users prefer, this is not the case with Webpack. Both loaders are similar in terms of popularity. It is also not difficult to change between the two if needed. Originally, awesome-typescript-loader was faster than ts-loader but with the evolution of TypeScript, the difference is often minimal. Also, there is sometimes an issue with an advanced feature in one or the other, and so it is practical to be able to switch depending on how your project. I'll present ts-loader, which is a little more popular, still actively maintained, and has a little more usage than the awesome-typescript-loader.

In the case, you are not yet using webpack, we need to install it:

npm install --save-dev webpack
npm install --save-dev webpack-cli

Once webpack is installed, you can install the TypeScript loader:

npm install --save-dev ts-loader

Once all the tools are installed, you can configure webpack to bundle the JavaScript produced by the webpack loader. However, webpack.config.js is needed at the root of your project. Like any Webpack configuration, the entry property must be defined. Make sure you are referring to the TypeScript file. The output is also specified in the output property. Webpack requires mentioning the extension to be analyzed. In TypeScript case it is .ts, but if you are working with React you might want to also add .tsx under resolve:extensions. Finally, the ts-loader is specified under module:rules. Once again, the extension of TypeScript is required and the name of the loader:

module.exports = {
 mode: "development",
 devtool: "source-map",
 entry: "./src/index.ts",
 output: {
  path: __dirname + "/build",
  filename: "bundle.js"
 },
 resolve: {
  extensions: [".ts"]
 },
 module: {
  rules: [
  { test: /.ts$/, loader: "ts-loader" }
  ]
 }
};

You can run the webpack command line (cli) by accessing the binary file, which will read the webpack.config.js file:

node node-modules/webpack-cli/bin/cli.js

If you want to avoid referencing node_modules, you can install webpack-cli in your global space, using npm install -g webpack-cli.

Here are a few little details about webpack. There is an additional module that divides the production of the bundle and compilation, compared to just validating TypeScript. These modules might be interesting when your project starts to grow and you want to have a faster compilation pace. Feel free to check fork-ts-checker-webpack-plugin and thread-loader. Before diving into other libraries, ts-loader has a way to incrementally build and to use the TypeScript watch API to avoid building everything all the time. This will increase your performance on every compilation. To allow the watch, change the rule of ts-loader to the following:

rules: [
 {
 test: /.ts$/,
 use: [
  {
   loader: 'ts-loader',
   options: {
    transpileOnly: true,
    experimentalWatchApi: true,
   },
  },
 ],
 }
]

A final detail about webpack is its dependency on tsconfig.json for all TypeScript related configurations. Grunt and Gulp allow you to override configurations inside their tool configuration, which is not the case with webpack. When bundling, webpack produces bundle.js.map, but only if the dev tool specifies a configuration. However, you must set the tsconfig.json "sourceMap" to true to have a mapping that works with TypeScript.