TypeScript Loader for webpack
webpack-typescript is a lightweight, cleanly designed TypeScript loader for webpack allowing you to pack multiple modules written in TypeScript into a bundle. It supports TypeScript 1.5, 1.6, and experimentally supports nightly builds of upcoming TypeScript 1.7 and 1.8.
Installation
To install webpack-typescript run the following command in your project directory:
npm install webpack-typescript --save-dev
And if you want to use a nightly build of TypeScript, also install typescript@next before or after installing webpack-typescript:
npm install typescript@next --save-dev
Configuration
Here is a sample webpack.config.js file featuring webpack-typescript loader:
moduleexports = entry: './index' output: path: __dirname + '/dist' filename: 'bundle.js' resolve: extensions: '' '.js' '.ts' '.tsx' devtool: 'source-map' // if we want a source map module: loaders: test: /\.tsx?$/ loader: 'webpack-typescript?target=ES5&jsx=react'
Here you can find more about configuring webpack.
Compiler Options
TypeScript compiler options can be supplied as loader query parameters (like in the sample webpack.config.js above), and by a standard tsconfig.json file. Note that the "files"
and "exclude"
sections in tsconfig.json are ignored, because now webpack decides what to compile. Likewise, the loader ignores the compiler options "out"
, "outFile"
, "outDir"
, "rootDir"
, "sourceRoot"
, and "mapRoot"
.
webpack-typescript uses the same algorithm to find a tsconfig.json as TypeScript compiler uses itself, i.e. first look in the current working directory, then in ancestor directories until it is found.
If you have a question, a bug report, or a feature request, please don't hesitate to post an issue in the issue tracker.