Как использовать aliases с typescript + webpack?

@magali 

Вы можете использовать алиасы в TypeScript вместе с Webpack для улучшения читабельности и уменьшения длины путей в вашем коде.

Чтобы настроить алиасы в TypeScript, вы можете добавить их в файл tsconfig.json:

1
2
3
4
5
6
7
8

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@/*": ["./*"]
    }
  }
}

Это задает алиас "@" для всех файлов в папке "src".

Чтобы использовать алиасы в Webpack, вы можете использовать плагин "ts-alias-webpack-plugin":

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

const TsAlias = require("ts-alias-webpack-plugin");

module.exports = {
  // ...
  plugins: [
    new TsAlias({
      config: "./tsconfig.json"
    })
  ]
};

Теперь вы можете использовать алиасы в вашем коде, например:

1

import { someFunction } from "@/utils";

Это улучшит читабельность и сделает ваш код более гибким, так как вы сможете легко изменить путь к файлу, не изменяя код.