TypeScript: Tooling

Integrating TypeScript with Webpack

In this lesson, we are going to learn how to compile a TypeScript project using Webpack. This setup becomes necessary if you want to bundle TypeScript containing ES6 or the CommonJS module system imports and exports.

(source: unsplash.com)

If you haven’t read the TypeScript Compilation lesson, then first go through it once. The knowledge of the TypeScript compilation process and the tsconfig.json file is necessary to understand this lesson.

Understanding TypeScript’s “Compilation Process” & the anatomy of “tsconfig.json” file

I am assuming that you know what Webpack is and what it is used for. But those who don’t, Webpack is a bundling tool primarily used to combine multiple files together to produce a single bundle. For example, you can combine multiple JavaScript files together to produce one main.js which you will eventually import in the Web application using a <script> tag.

But what separates Webpack from task runners such as Grunt or Gulp is the other functionalities it…