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

Configuration

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

Declaration files

All declaration files should be resolvable from the entry file. The easiest way to do this is to create a _references.d.ts file which contains references to all of your declaration files. Then reference _references.d.ts from your entry file.

_references.d.ts

///<reference path="path/to/declaration.d.ts" />
///<reference path="path/to/another/declaration.d.ts" />

app.ts

///<reference path="path/to/_references.d.ts" />

import MyClass = require('./MyClass');

...

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

Please see selective-jsx-loader

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.1.0

• Initial version