Webpack resolve.alias 不适用于Typescript

发布于11月06日

我试着用typescript缩短导入的时间

从import {Hello} from "./components/Hello";

到import {Hello} from "Hello";

为此，我发现您可以在webpack中使用resolve.alias，因此我将该部分配置如下

resolve: {
    root: path.resolve(__dirname),
    alias: {
        Hello: "src/components/Hello"
    },
    extensions: ["", ".ts", ".tsx", ".js"]
},

Webpack构建，以及输出包.js很管用.然而，typescript的intellisense却抱怨说它是cannot find the module

所以我的问题是webpack是否解决了这个问题.alias与typescript一起工作？

我找到了issue个，但没有答案.

推荐答案

如果您使用的是ts-loader，您可能需要将网页alias/resolve设置与tsconfig.json中的paths设置同步.

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

如果您使用的是awesome-typescript-loader，那么webpack可以根据tsconfig.json中的paths设置自动计算出来，如the status on this issue from the repo所示.这样，您就不需要在Webpack alias字段中复制相同的信息.