ts-paths-resolve-plugin

A webpack resolve plugin for resolving tsconfig paths.

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

Configurate in webpack.config.js:

const TsPathsResolvePlugin = require('ts-paths-resolve-plugin');

module.exports = {
  resolve: {
    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
    plugins: [new TsPathsResolvePlugin()],
  }
}

tsconfig.json example:

{
  "compilerOptions": {
    "paths": {
      "~/*": ["./*"]
    }
  }
}

And you can import with alias instead of annoying path

// import App from "../../../../App"
import App from "~/App"

...

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