# TypeScript and transpilation — Webpack

Source: https://www.geekswithgeeks.com/en/webpack/webpack-20

> Use TypeScript with Webpack.

## TypeScript integration

Webpack doesn't understand TypeScript natively. Use ts-loader or babel-loader with @babel/preset-typescript. ts-loader provides type checking during build. fork-ts-checker-webpack-plugin runs type checking in parallel for faster builds. Configure tsconfig.json module to 'esnext' and let Webpack handle module transformation.

## Configure TypeScript

Set up ts-loader with parallel type checking.

```javascript
const ForkTsCheckerPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        options: { transpileOnly: true }
      }
    ]
  },
  plugins: [new ForkTsCheckerPlugin()]
};
```

Output:

```
TypeScript compiled with parallel type checking
```

## transpileOnly for speed

Set transpileOnly: true to skip type checking in ts-loader, letting fork-ts-checker run it separately. This speeds up rebuilds significantly in development, while maintaining type safety.

Quick check

**Quiz:** What does fork-ts-checker-webpack-plugin do?

- [x] Runs type checking in parallel for faster builds.
- [ ] Removes TypeScript from the bundle.
- [ ] Enables decorators in TypeScript.

*Answer:* Runs type checking in parallel for faster builds.. fork-ts-checker-webpack-plugin offloads type checking to a separate process, allowing faster compilation during development.