Webpack resolve.alias无法与TypeScript一起使用吗？

有2例

1. 当您编写自定义Webpack时，它可以使用Typescript，但不能直接使用。解释一下，后台有两种编译类型。首先是tsx-> tsconfig.json扮演角色的js，但是当您实际编译js代码时，webpack就会出现。因此，对于别名，应在两个位置（即tsconfig和webpack中）放置解析，以成功运行应用程序
2. 使用default时（创建react应用后）：只需添加"baseUrl": "./src"tsconfig并查看代码即可。

如其他人所述，您需要alias在webpack.config.js中提供一个：

    resolve: { 

        extensions: [".ts", ".js"],
        alias: {
            forms: path.resolve(__dirname, "src/forms/")
        } 
    },

这需要与您的tsconfig.json文件同步（需要baseUrl和路径）。

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

注意：必须使用通配符模式才能与您的解析别名配置匹配。

然后，您可以使用别名导入任何库：

import { FormsModule } from "forms/my-forms/my-forms.module";

如果你使用ts-loader，你可能需要您的WebPack同步alias/ resolve设置请paths在您的设置tsconfig.json。

{
    "compilerOptions": {
        "baseUrl": "./",
        "paths": {
            "Hello": ["src/components/Hello"]
        }
    }
}

如果您使用awesome-typescript-loader，则可以的WebPack自动从算出这个paths设置在你的tsconfig.json，按从回购这一问题上的地位。这样，您无需在Webpack alias字段中重复相同的信息。

如果仍然有人遇到此问题，请不要忘记将文件夹添加到tsconfig.json的“ include”选项中，如下所示：

{
  "compilerOptions": {
    "sourceMap": true,
    "allowJs": true,
    "baseUrl": "./",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "target": "es5",
    "module": "es2015",
    "moduleResolution": "node",
    "lib": [
      "es2016",
      "dom"
    ]
  },
  "outDir": "./built/",
  "include": [
    "./src/**/*",
    "./tests/**/*"
  ]
}

Dudes，您缺少tsconfig.json中的一个非常重要的要点：匹配模式！

应该这样配置：

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

“ *”是告诉TS匹配右侧任何内容的重要部分。

我从这篇文章中发现了这一点：https : //medium.com/@martin_hotell/type-safe-es2015-module-import-path-aliasing-with-webpack-typescript-and-jest-fe461347e010