typescriptでWebpack resolve.aliasは機能しませんか？

Question

私はあなたが

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

を以下のようので、私はその部分を構成しWebPACKので resolve.aliasを使用することができます見つけたそのために import {Hello} from "Hello";

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

からtypescriptです

で私の輸入を短くしてみてください

Webpackがビルドされ、出力bundle.jsが機能します。しかし、typescriptのintellisenseそれを文句を言うcannot find the module

私の質問は、Webpackのresolve.alias typescriptで動作するかどうかですか？

issueに次のような結果が見つかりましたが、答えはありません。

Answer 1

あなたがts-loaderを使用している場合、あなたはあなたのtsconfig.jsonであなたのpaths設定であなたのWebPACK alias/resolve設定を同期する必要がある場合があります。

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

あなたがawesome-typescript-loaderを使用している場合は、WebPACKのthe status on this issue from the repoごとに、あなたのtsconfig.jsonにpaths設定から、これを自動的に把握することができます。そうすれば、Webpack aliasフィールドに同じ情報を複製する必要はありません。

Answer 2

私はあなたがこれを行うと、それはあなたが記述のように動作することができますと思う：

resolve: { 
    root: [ 
     path.resolve(__dirname), 
     <path_to_components_directory> //e.g. path.resolve(__dirname, 'src', 'components') 
    ], 
    extensions: ["", ".ts", ".tsx", ".js"] 
}, 

次にあなたがimport {Hello} from "Hello";

を行うことができます私はsrc/jsディレクトリ内のファイルパスを解決するために、これを行う知っています。私はtypescriptを使用していませんが、結果に影響するとは思いません。