Essential webpack plugins provided by awesome-typescript-loader for enhanced functionality including async error reporting, watch mode detection, and TypeScript path mapping support.
Webpack plugin that enables async error reporting and watch mode detection for the TypeScript loader.
class CheckerPlugin {
/**
* Apply the plugin to webpack compiler
* Sets up hooks for run and watchRun to detect watch mode
* @param compiler - Webpack compiler instance
*/
apply(compiler: any): void;
}The CheckerPlugin is essential for:
Usage Example:
const { CheckerPlugin } = require('awesome-typescript-loader');
module.exports = {
plugins: [
new CheckerPlugin()
]
};Note: CheckerPlugin is disabled when transpileOnly: true is used, as type checking is skipped entirely in that mode.
Webpack resolver plugin that enables TypeScript path mapping support based on tsconfig.json paths configuration.
class TsConfigPathsPlugin {
/**
* Create path mapping plugin
* @param config - Configuration combining loader config, compiler options, and path plugin options
*/
constructor(config?: LoaderConfig & ts.CompilerOptions & PathPluginOptions);
/**
* Apply the plugin to webpack resolver
* Sets up path mapping resolution based on TypeScript paths configuration
* @param resolver - Webpack resolver instance
*/
apply(resolver: Resolver): void;
/**
* Check if target is a typing file that should be skipped
* @param target - Target file path
* @returns True if target is a typing file
*/
isTyping(target: string): boolean;
/**
* Create resolver plugin for specific path mapping
* @param resolver - Webpack resolver instance
* @param mapping - Path mapping configuration
* @returns Resolver callback function
*/
createPlugin(resolver: Resolver, mapping: Mapping): ResolverCallback;
}Usage Example:
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
module.exports = {
resolve: {
plugins: [
new TsConfigPathsPlugin({
configFileName: 'tsconfig.json'
})
]
}
};TypeScript Configuration Example:
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"@components/*": ["src/components/*"],
"@utils/*": ["src/utils/*"]
}
}
}With this configuration, imports like @/config will resolve to src/config, and @components/Button will resolve to src/components/Button.
Internal types and interfaces used by the path mapping system.
interface PathPluginOptions {
/** Base context directory */
context?: string;
}
interface Mapping {
/** Whether mapping is for entire module (no wildcards) */
onlyModule: boolean;
/** Original alias pattern from paths config */
alias: string;
/** Compiled regex pattern for matching */
aliasPattern: RegExp;
/** Target path template */
target: string;
}
interface Request {
/** Parent request object */
request?: Request;
/** Relative path being resolved */
relativePath: string;
}
interface Resolver {
/** Webpack resolver hooks */
hooks: any;
/** Apply a resolver plugin */
apply(plugin: ResolverPlugin): void;
/** Legacy plugin method */
plugin(source: string, cb: ResolverCallback): void;
/** Perform resolution */
doResolve(
target: Hook,
req: Request,
desc: string,
resolveContext: any,
callback: Callback
): void;
/** Ensure hook exists */
ensureHook(name: string): Hook;
/** Join paths for resolution */
join(relativePath: string, innerRequest: Request): Request;
}
interface ResolverPlugin {
/** Apply plugin to resolver */
apply(resolver: Resolver): void;
}
type ResolverCallback = (request: Request, callback: Callback) => void;
interface Hook {
/** Tap async callback for resolver hook */
tapAsync(name: string, callback: ResolverCallback): void;
}
interface Callback {
/** Callback function signature */
(err?: Error, result?: any): void;
/** Callback properties */
log?: any;
stack?: any;
missing?: any;
}Internal watch mode detection system used by CheckerPlugin.
/** Symbol used to mark webpack compiler with watch mode status */
export const WatchModeSymbol: Symbol;The CheckerPlugin uses this symbol to track whether webpack is running in watch mode:
// Set during webpack run hook
compiler[WatchModeSymbol] = false;
// Set during webpack watchRun hook
compiler[WatchModeSymbol] = true;Complex configuration scenarios for large applications.
Multiple Path Mappings:
const { TsConfigPathsPlugin } = require('awesome-typescript-loader');
module.exports = {
resolve: {
plugins: [
// Main application paths
new TsConfigPathsPlugin({
configFileName: 'tsconfig.json',
context: path.resolve('src')
}),
// Test-specific paths
new TsConfigPathsPlugin({
configFileName: 'tsconfig.test.json',
context: path.resolve('test')
})
]
}
};Conditional Plugin Usage:
const { CheckerPlugin, TsConfigPathsPlugin } = require('awesome-typescript-loader');
const isProduction = process.env.NODE_ENV === 'production';
const plugins = [];
// Always use path mapping
plugins.push(new TsConfigPathsPlugin());
// Only use checker in development for faster builds
if (!isProduction) {
plugins.push(new CheckerPlugin());
}
module.exports = {
resolve: {
plugins: [new TsConfigPathsPlugin()]
},
plugins
};Integration with Fork Type Checking:
const { CheckerPlugin } = require('awesome-typescript-loader');
module.exports = {
module: {
rules: [{
test: /\.tsx?$/,
loader: 'awesome-typescript-loader',
options: {
transpileOnly: false, // Keep type checking enabled
useCache: true, // Use caching for performance
reportFiles: ['src/**/*.{ts,tsx}'] // Limit type checking scope
}
}]
},
plugins: [
new CheckerPlugin() // Required for async type checking
]
};