ts-loader 9.4.4

The "ts-loader" is a TypeScript loader for webpack, allowing seamless integration of TypeScript with webpack projects. It acts as a bridge between the TypeScript compiler and webpack, enabling webpack to consume TypeScript files and output JavaScript that can run in the browser. The ts-loader supports TypeScript compiler options, webpack watch, HMR (Hot Module Replacement), as well as other functionalities to enhance the work process.

To use "ts-loader", we first install it via npm or yarn:

npm install ts-loader --save-dev

# or if you are using yarn
yarn add ts-loader --dev

You also need to install TypeScript if you haven't:

npm install typescript --save-dev

# or if you are using yarn
yarn add typescript --dev

Finally, modify your webpack configuration (for example, in webpack.config.js) to include ts-loader in the module rules. This instructs webpack to pass .ts and .tsx files to ts-loader:

module.exports = {
  mode: "development",
  devtool: "inline-source-map",
  resolve: {
    extensions: [".ts", ".tsx", ".js"]
  },
  module: {
    rules: [
      { 
        test: /\.tsx?$/, 
        use: [
          {
            loader: 'ts-loader',
            options: {
              transpileOnly: true
            }
          }
        ],
        exclude: /node_modules/
      }
    ]
  },
};

The configuration above tells webpack to process files ending with .ts or .tsx with ts-loader.

Additionally, the options: { transpileOnly: true } configuration is used to speed up compilation by using the transpile-only mode. This will not perform type checking and only emit JavaScript code.

Keep in mind, however, that while this significantly speeds up the build process, it also omits all types from the TypeScript compiler. You may want to use fork-ts-checker-webpack-plugin along with ts-loader to get the benefits of type checking while maintaining the fast build time.

The official documentation for ts-loader can be found on its GitHub repository. The README file includes a comprehensive guide on installation, usage, and a detailed explanation of all available options. The examples directory of the repository provides samples of configurations with different scenarios, providing a hands-on approach to understanding the usage of the ts-loader.