Fork TS Checker Webpack Plugin

Webpack plugin that runs TypeScript type checker on a separate process.

Features

• Speeds up TypeScript type checking (by moving it to a separate process) 🏎
• Supports modern TypeScript features like project references and incremental mode ✨
• Displays nice error messages with the code frame formatter 🌈

Installation

This plugin requires Node.js >=14.0.0+, Webpack ^5.11.0, TypeScript ^3.6.0

• If you depend on TypeScript 2.1 - 2.6.2, please use version 4 of the plugin.
• If you depend on Webpack 4, TypeScript 2.7 - 3.5.3 or ESLint feature, please use version 6 of the plugin.
• If you depend on Node.js 12, please use version 8 of the plugin.
• If you need Vue.js support, please use version 6 of ths plugin

# with npm
npm install --save-dev fork-ts-checker-webpack-plugin

# with yarn
yarn add --dev fork-ts-checker-webpack-plugin

# with pnpm
pnpm add -D fork-ts-checker-webpack-plugin

The minimal webpack config (with ts-loader)

// webpack.config.js
const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin');

module.exports = {
  context: __dirname, // to automatically find tsconfig.json
  entry: './src/index.ts',
  resolve: {
    extensions: [".ts", ".tsx", ".js"],
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        // add transpileOnly option if you use ts-loader < 9.3.0 
        // options: {
        //   transpileOnly: true
        // }
      }
    ]
  },
  plugins: [new ForkTsCheckerWebpackPlugin()],
  watchOptions: {
    // for some systems, watching many files can result in a lot of CPU or memory usage
    // https://webpack.js.org/configuration/watch/#watchoptionsignored
    // don't use this pattern, if you have a monorepo with linked packages
    ignored: /node_modules/,
  },
};

Examples how to configure it with babel-loader, ts-loader and Visual Studio Code are in the examples directory.

Modules resolution

It's very important to be aware that this plugin uses TypeScript's, not webpack's modules resolution. It means that you have to setup tsconfig.json correctly.

It's because of the performance - with TypeScript's module resolution we don't have to wait for webpack to compile files.

To debug TypeScript's modules resolution, you can use tsc --traceResolution command.

Options

This plugin uses cosmiconfig. This means that besides the plugin constructor, you can place your configuration in the: * "fork-ts-checker" field in the package.json * .fork-ts-checkerrc file in JSON or YAML format * fork-ts-checker.config.js file exporting a JS object

Options passed to the plugin constructor will overwrite options from the cosmiconfig (using deepmerge).

TypeScript options

Options for the TypeScript checker (typescript option object).