TypeScript相対パスのインポートがWebpackで機能しない

Question

相対パスを使用してTypeScriptでモジュールをインポートしました。

// index.ts 
import {Widget} from './components/Widget'; 

のWebPACKは私に次のエラーを与える：

ERROR in ./src/index.ts 
Module not found: Error: Can't resolve './components/Widget' in 
C:\project\src' @ ./src/index.ts 4:19-51 

マイWebPACKの設定ファイルは、規則でTS-ローダーとエントリファイルとしてindex.tsを指すと、かなり基本的なものです。

私はここで間違っていますか？

---

追加情報：

プロジェクトのフォルダ構造：

c:\project 
├─ src 
│ ├─ index.ts 
│ └─ components 
│  └─ Widget.ts 
├─ webpack.config.js 
└─ tsconfig.json 

WebPACKの設定：

const path = require('path'); 

const config = { 
    entry: './src/index.ts', 
    output: { 
    path: path.resolve(__dirname, 'dist'), 
    filename: 'bundle.js' 
    }, 
    module: { 
    rules: [ 
     { test: /\.tsx?$/, use: 'ts-loader' } 
    ] 
    } 
}; 

module.exports = config; 

tsconfig.json

の

{ 
    "compilerOptions": { 
     "outDir": "dist", 
     "module": "commonjs", 
     "target": "es6" 
    }, 
    "include": [ "src/**/*" ], 
    "exclude": [ 
     "node_modules" 
    ] 
} 

バージョン：

webpack 3.1.0 
typescript 2.4.1 
ts-loader 2.2.2 

Answer 1

あなたwebpack.config.jsにresolve.extensionsを追加します。

{ 
    resolve: { 
     extensions: ['.ts', '.js', '.json'] 
    } 
} 

のWebPACKはデフォルトでモジュールの解像度、あなたのモジュールの1（ref）に延長レスインポートを書くとき.jsと.jsonファイルのみを検索します。

ですから、書くとき：

import {Widget} from './components/Widget'; 

のWebPACKは、デフォルトでこれらのファイルを検索します。

./components/Widget.js 
./components/Widget.json 

ひいてはがModule not foundエラーを与えてしまいます。