How to use tsconfig-paths-webpack-plugin - 10 common examples
To help you get started, we’ve selected a few tsconfig-paths-webpack-plugin examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
bennymeg / nx-electron / src / utils / config.ts View on Github 
test: /\.(j|t)sx?$/,
loader: `ts-loader`,
options: {
configFile: options.tsConfig,
transpileOnly: true,
// https://github.com/TypeStrong/ts-loader/pull/685
experimentalWatchApi: true
}
}
]
},
resolve: {
extensions,
alias: getAliases(options),
plugins: [
new TsConfigPathsPlugin({
configFile: options.tsConfig,
extensions,
mainFields
})
],
mainFields
},
performance: {
hints: false
},
plugins: [
new ForkTsCheckerWebpackPlugin({
tsconfig: options.tsConfig,
workers: options.maxWorkers || ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE,
useTypescriptIncrementalApi: false // FIXME: disabled incremental api in favour of max workers until it will be supported
})getResolve() {
return {
/* root: this.resolvePath('src'),
modulesDirectories: ['node_modules'], */
alias: this.getResolveAlias(),
extensions: this.getResolveExtensions(),
modules: [
this.resolvePath('src'),
'node_modules',
],
...(this.isTypescriptSupport() ? {
plugins: [
new TsconfigPathsPlugin({ configFile: this.resolvePath('tsconfig.json') }),
],
} : {}),
};
}getResolve() {
return {
/* root: this.resolvePath(srcDir),
modulesDirectories: ['node_modules'], */
alias: this.getResolveAlias(),
extensions: this.getResolveExtensions(),
modules: [
this.resolvePath(srcDir),
'node_modules',
],
...(this.isTypescriptSupport() ? {
plugins: [
new TsconfigPathsPlugin({ configFile: this.resolvePath('tsconfig.json') }),
]
} : {}),
};
}test: /\.(j|t)sx?$/,
loader: `ts-loader`,
options: {
configFile: options.tsConfig,
transpileOnly: true,
// https://github.com/TypeStrong/ts-loader/pull/685
experimentalWatchApi: true
}
}
]
},
resolve: {
extensions,
alias: getAliases(options),
plugins: [
new TsConfigPathsPlugin({
configFile: options.tsConfig,
extensions,
mainFields
})
],
mainFields
},
performance: {
hints: false
},
plugins: [
new ForkTsCheckerWebpackPlugin({
tsconfig: options.tsConfig,
workers: options.maxWorkers || ForkTsCheckerWebpackPlugin.TWO_CPUS_FREE,
useTypescriptIncrementalApi: false
})getResolve() {
return {
/* root: this.resolvePath(srcDir),
modulesDirectories: ['node_modules'], */
alias: this.getResolveAlias(),
extensions: this.getResolveExtensions(),
modules: [
this.resolvePath(srcDir),
'node_modules',
],
...(this.isTypescriptSupport() ? {
plugins: [
new TsconfigPathsPlugin({ configFile: this.resolvePath('tsconfig.json') }),
]
} : {}),
};
}}
// Extensions
if (config.resolve.extensions) {
config.resolve.extensions.push(".ts", ".tsx");
} else {
config.resolve.extensions = [".ts", ".tsx"];
}
// Modules
if (config.resolve.modules) {
config.resolve.modules.push(resolveSourceRoot());
config.resolve.modules.push("node_modules");
} else {
config.resolve.modules = [resolveSourceRoot(), "node_modules"];
}
// Resolve
const tsPathPlugin = new TsconfigPathsPlugin({
configFile: resolveTsConfig(),
});
if (config.resolve.plugins) {
config.resolve.plugins.push(tsPathPlugin);
} else {
config.resolve.plugins = [tsPathPlugin];
}
}
return config;
}export function getWebpackConfig(config: any) {
const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
return {
resolve: {
extensions,
plugins: [
new TsconfigPathsPlugin({
configFile: config.env.tsConfig,
extensions
})
]
},
module: {
rules: [
{
test: /\.(j|t)sx?$/,
loader: 'ts-loader',
exclude: [/node_modules/],
options: {
configFile: config.env.tsConfig,
// https://github.com/TypeStrong/ts-loader/pull/685
experimentalWatchApi: true
}const module = {
...baseConfig.module,
rules: [...cliStyleConfig.module.rules, ...rulesExcludingStyles],
};
// We use cliCommonConfig plugins to serve static assets files.
const plugins = [...cliStyleConfig.plugins, ...cliCommonConfig.plugins, ...baseConfig.plugins];
const resolve = {
...baseConfig.resolve,
modules: Array.from(
new Set([...baseConfig.resolve.modules, ...cliCommonConfig.resolve.modules])
),
plugins: [
new TsconfigPathsPlugin({
configFile: cliWebpackConfigOptions.buildOptions.tsConfig,
// After ng build my-lib the default value of 'main' in the package.json is 'umd'
// This causes that you cannot import components directly from dist
// https://github.com/angular/angular-cli/blob/9f114aee1e009c3580784dd3bb7299bdf4a5918c/packages/angular_devkit/build_angular/src/angular-cli-files/models/webpack-configs/browser.ts#L68
mainFields: [
...(cliWebpackConfigOptions.supportES2015 ? ['es2015'] : []),
'browser',
'module',
'main',
],
}),
],
};
return {
...baseConfig,return function webpackConfig(config, { defaultLoaders }) {
const mainFields = ['es2015', 'module', 'main'];
const extensions = ['.ts', '.tsx', '.mjs', '.js', '.jsx'];
config.resolve.plugins = [
new TsConfigPathsPlugin({
configFile: path.resolve(root, 'tsconfig.json'),
extensions,
mainFields
})
];
config.module.rules.push({
test: /\.tsx/,
use: [defaultLoaders.babel]
});
return config;
};
}loader: 'ts-loader',
options: {
configFile: options.tsConfig,
transpileOnly: true,
getCustomTransformers: program => ({
before: [transformers_1.inlineFilesTransformer(program), transformers_1.stripStylesTransformer(program)],
}),
},
},
],
},
resolve: {
extensions,
alias: getAliases(options),
plugins: [
new tsconfig_paths_webpack_plugin_1.default({
configFile: options.tsConfig,
extensions,
mainFields,
}),
],
mainFields,
},
performance: {
hints: false,
},
plugins: [
new ForkTsCheckerWebpackPlugin({
tsconfig: options.tsConfig,
useTypescriptIncrementalApi: options.useTypescriptIncrementalApi,
workers: options.useTypescriptIncrementalApi
? ForkTsCheckerWebpackPlugin.ONE_CPUtsconfig-paths-webpack-plugin
Load modules according to tsconfig paths in webpack.
