ts-loader

What is ts-loader?

The ts-loader package is a TypeScript loader for webpack that allows you to transpile TypeScript files (.ts, .tsx) to JavaScript while bundling with webpack. It enables you to integrate TypeScript into your webpack build process.

What are ts-loader's main functionalities?

Transpilation of TypeScript to JavaScript

This feature allows you to compile TypeScript files into JavaScript, enabling you to use TypeScript in your webpack projects. The code sample shows a webpack configuration that uses ts-loader to process files with .ts or .tsx extensions.

module.exports = {
  mode: 'development',
  entry: './src/index.ts',
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js']
  },
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist')
  }
};

Integration with webpack's watch mode

ts-loader works seamlessly with webpack's watch mode, which recompiles your code when changes are detected. This feature is useful for development as it provides a fast feedback loop.

webpack --watch

Source map support

ts-loader supports the generation of source maps, which help in debugging by mapping the compiled code back to the original TypeScript source code. The code sample shows how to enable inline source maps in your webpack configuration.

module.exports = {
  devtool: 'inline-source-map',
  // ... other webpack configuration
};

Other packages similar to ts-loader

awesome-typescript-loader

Similar to ts-loader, awesome-typescript-loader is another TypeScript loader for webpack. It offers features like Babel integration and type checking in a separate process. However, it is no longer actively maintained, and users are recommended to switch to ts-loader or other alternatives.

babel-loader

While not a TypeScript-specific loader, babel-loader can be used in conjunction with @babel/preset-typescript to transpile TypeScript code. It is part of the Babel ecosystem and is often used for its broader transformation capabilities and plugin ecosystem.

esbuild-loader

esbuild-loader uses the esbuild bundler to transpile TypeScript (and other files) at a much faster rate than traditional loaders. It is known for its speed and efficiency, making it a strong alternative to ts-loader, especially in large projects where build time is a concern.

README

TypeScript loader for webpack

Usage

Installation

npm install ts-loader

Upgrading

Take advantage of the Changelog and Upgrade Guide.

Running

Use webpack like normal, including webpack --watch and webpack-dev-server, or through another build system using the Node.js API.

Configuration

1. Add .ts as a resolvable extension.
2. Configure all files with a .ts extension to be handled by ts-loader.

module.exports = {
    entry: './app.ts',
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.js', '.ts']
    },
    module: {
        loaders: [
            { test: /\.ts$/, loader: 'ts-loader' }
        ]
    }
}

Options

Most TypeScript-related options should be set using a tsconfig.json file. There are a few loader-specific options you can set although in general you should not need to.

compiler (string) (default='typescript')

Allows use of TypeScript compilers other than the official one. Should be set to the NPM name of the compiler.

instance (string)

Advanced option to force files to go through different instances of the TypeScript compiler. Can be used to force segregation between different parts of your code.

configFileName (string) (default=tsconfig.json)

Allows you to specify a custom configuration file.

Loading other resources and code splitting

Loading css and other resources is possible but you will need to make sure that you have defined the require function in a declaration file.

declare var require: {
    <T>(path: string): T;
    (paths: string[], callback: (...modules: any[]) => void): void;
    ensure: (paths: string[], callback: (require: <T>(path: string) => T) => void) => void;
};

Then you can simply require assets or chunks per the webpack documentation.

require('!style!css!./style.css');

React JSX

This loader supports using jsx-typescript. Simply install jsx-typescript and use the compiler=jsx-typescript option.

If for some reason using jsx-typescript doesn't work or you want to use the official TypeScript take a look at ts-jsx-loader.

Building from source

tsd reinstall
npm install
tsc index.ts --module commonjs

License

The MIT License (MIT)

Copyright (c) 2015 James Brantly

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

Changelog

v0.4.3

• Fix error locations to be 1-based instead of 0-based (#18)