Webpack resolve.alias 不适用于打字稿? [英] Webpack resolve.alias does not work with typescript?

问题描述

我尝试缩短我在打字稿中的导入

I try to shorten my imports in typescript

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

to import {Hello} from "Hello";

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

For that I found out you can use resolve.alias in webpack thus I configured that part as following

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

Webpack 构建，并且输出 bundle.js 工作.然而打字稿的智能感知抱怨它cannot find the module

Webpack builds, and the output bundle.js works. However typescript's intellisense complain it cannot find the module

所以我的问题是 webpack 的 resolve.alias 是否适用于 typescript?

So my question is whether or not webpack's resolve.alias works with typescript?

我发现以下问题但没有答案.

I found following issue but there's no answer to it.

推荐答案

如果你使用 ts-loader，你可能需要同步你的 webpack alias/resolve 设置与 tsconfig.json 中的 paths 设置.

If you're using ts-loader, you might have to synchronize your webpack alias/resolve settings with your paths setting in your tsconfig.json.

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

如果你使用 awesome-typescript-loader，那么 webpack 可以从你的 tsconfig.jsonpaths 设置中自动计算出来>，根据 repo 中此问题的状态.这样，您就不需要在 Webpack alias 字段中复制相同的信息.

If you're using awesome-typescript-loader, then webpack can figure this out automatically from the paths setting in your tsconfig.json, as per the status on this issue from the repo. That way, you don't need to duplicate the same information in your Webpack alias field.

这篇关于Webpack resolve.alias 不适用于打字稿?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！