Comprehensive configuration system for awesome-typescript-loader allowing customization of TypeScript compilation, Babel integration, caching, and performance optimization.
Main configuration interface for all loader options.
interface LoaderConfig {
instance?: string;
compiler?: string;
configFileName?: string;
configFileContent?: string;
forceIsolatedModules?: boolean;
errorsAsWarnings?: boolean;
transpileOnly?: boolean;
ignoreDiagnostics?: number[];
compilerOptions?: ts.CompilerOptions;
useTranspileModule?: boolean;
useBabel?: boolean;
babelCore?: string;
babelOptions?: any;
usePrecompiledFiles?: boolean;
silent?: boolean;
useCache?: boolean;
cacheDirectory?: string;
entryFileIsJs?: boolean;
debug?: boolean;
reportFiles?: string[];
context?: string;
getCustomTransformers?: string | ((program: ts.Program) => ts.CustomTransformers | undefined);
}Essential configuration options for TypeScript compilation.
interface CoreOptions {
/** Instance name for multiple TypeScript compilers (default: 'at-loader') */
instance?: string;
/** Alternative TypeScript compiler package (default: 'typescript') */
compiler?: string;
/** Path to TypeScript config file (default: 'tsconfig.json') */
configFileName?: string;
/** Inline TypeScript config content */
configFileContent?: string;
/** Override TypeScript compiler options */
compilerOptions?: ts.CompilerOptions;
/** Base context directory */
context?: string;
}Usage Example:
module.exports = {
module: {
rules: [{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
instance: 'my-app',
compiler: 'typescript',
configFileName: 'tsconfig.build.json',
context: __dirname
}
}]
}
};Options controlling TypeScript compilation behavior.
interface CompilationOptions {
/** Disable type checking for faster compilation */
transpileOnly?: boolean;
/** Use fast transpileModule emit mode */
useTranspileModule?: boolean;
/** Force isolated module compilation */
forceIsolatedModules?: boolean;
/** Use pre-compiled .js/.map files if available */
usePrecompiledFiles?: boolean;
/** Whether entry file is JavaScript */
entryFileIsJs?: boolean;
}Usage Example:
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
transpileOnly: true, // Skip type checking for speed
forceIsolatedModules: true, // Faster compilation
useTranspileModule: true // Use fast emit mode
}
}Configuration for error reporting and diagnostic handling.
interface ErrorHandlingOptions {
/** Emit TypeScript errors as warnings instead of errors */
errorsAsWarnings?: boolean;
/** Array of TypeScript diagnostic codes to ignore */
ignoreDiagnostics?: number[];
/** Disable logging from checker */
silent?: boolean;
/** Enable debug logging */
debug?: boolean;
/** Glob patterns for files to report diagnostics */
reportFiles?: string[];
}Usage Example:
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
errorsAsWarnings: true,
ignoreDiagnostics: [2307, 2345], // Ignore specific error codes
reportFiles: ['src/**/*.{ts,tsx}'], // Only report errors for source files
silent: false
}
}Configuration for Babel transpilation after TypeScript compilation.
interface BabelOptions {
/** Enable Babel transpilation after TypeScript */
useBabel?: boolean;
/** Path to babel-core package (use "@babel/core" for Babel 7) */
babelCore?: string;
/** Babel configuration options */
babelOptions?: any;
}Usage Example:
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
useBabel: true,
babelCore: "@babel/core",
babelOptions: {
babelrc: false,
presets: [
["@babel/preset-env", {
targets: "last 2 versions, ie 11",
modules: false
}]
]
}
}
}Caching and performance optimization configuration.
interface PerformanceOptions {
/** Enable internal file caching */
useCache?: boolean;
/** Directory for cache storage (default: '.awcache') */
cacheDirectory?: string;
}Usage Example:
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
useCache: true,
cacheDirectory: '.webpack-cache'
}
}Advanced configuration for custom transformers and specialized use cases.
interface AdvancedOptions {
/** Custom TypeScript transformers */
getCustomTransformers?: string | ((program: ts.Program) => ts.CustomTransformers | undefined);
}Usage Example:
const styledComponentsTransformer = require('typescript-plugin-styled-components').default;
{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
getCustomTransformers: program => ({
before: [
styledComponentsTransformer()
]
})
}
}The loader integrates with TypeScript configuration files (tsconfig.json).
/**
* Read and parse TypeScript configuration file
* @param context - Base directory context
* @param config - Loader configuration
* @param compilerOptions - Additional compiler options
* @param tsImpl - TypeScript implementation
* @returns Configuration file path and parsed compiler config
*/
function readConfigFile(
context: string,
config: LoaderConfig,
compilerOptions: any,
tsImpl: typeof ts
): {
configFilePath: string;
compilerConfig: ts.ParsedCommandLine;
};Usage with tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true
},
"awesomeTypescriptLoaderOptions": {
"useCache": true,
"useBabel": true
}
}Support for multiple TypeScript compiler instances with different settings.
Usage Example:
module.exports = {
module: {
rules: [
{
test: /\.ts$/,
include: path.resolve('src/app'),
loader: 'awesome-typescript-loader',
options: {
instance: 'app-instance',
configFileName: 'tsconfig.app.json'
}
},
{
test: /\.ts$/,
include: path.resolve('src/worker'),
loader: 'awesome-typescript-loader',
options: {
instance: 'worker-instance',
configFileName: 'tsconfig.worker.json'
}
}
]
}
};interface CompilerInfo {
compilerPath: string;
compilerVersion: string;
tsImpl: typeof ts;
}