ts-paths-resolve-plugin

A webpack resolve plugin for resolving tsconfig paths.

1npm install --save-dev ts-paths-resolve-plugin

Configurate in webpack.config.js:

1
2const TsPathsResolvePlugin = require('ts-paths-resolve-plugin');
3
4module.exports = {
5  resolve: {
6    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
7    plugins: [new TsPathsResolvePlugin()],
8  }
9}

tsconfig.json example:

1{
2  "compilerOptions": {
3    "paths": {
4      "~/*": ["./*"]
5    }
6  }
7}
8

And you can import with alias instead of annoying path

1// import App from "../../../../App"
2import App from "~/App"
3
4...
5

Options

tsConfigPath (string | string[])

Specify set where your TypeScript configuration file.

If not set:

• use Environment variable TS_NODE_PROJECT
• or search tsconfig.json in current working directory.

logLevel ("none" | "error" | "warn" | "info" | "debug" | "trace") (default: "info")

Log level when the plugin is running.

reference

• https://www.typescriptlang.org/docs/handbook/module-resolution.html#path-mapping
• https://github.com/microsoft/TypeScript/issues/5039