Webpackの下の角が既存のファイルを見つけることができませんapp.module.ts

Question

私はこのようにwebpack.config.jsを持っています。

var HtmlWebpackPlugin = require("html-webpack-plugin"); 
module.exports = { 
    entry: "./source/application/main.ts", 
    output: { 
    path: "./distribution", 
    filename: "app.bundle.js" 
    }, 
    module: { loaders: [{ test: /\.ts$/, loader: "ts-loader" }] }, 
    plugins: [new HtmlWebpackPlugin({ template: "./source/index.html" })], 
    resolve: ["", ".js", ".ts"] 
} 

それはモジュール（以下第三のライン）をブートストラップする場合を除いて、適切main.tsファイルを検索し、解釈し、そのファイルを解決できないと言います。これは私のmain.tsファイルです。

import { platformBrowserDynamic } from "@angular/platform-browser-dynamic"; 
import { AppModule } from "./app.module"; 
platformBrowserDynamic().bootstrapModule(AppModule); 

解決できないファイルがあります。私がその名前を変更したり削除したりすると、私のIDEはそれが欠けていると伝えます。しかし、何らかの理由で、プロセスをブートストラップすると、コンピュータはそれを見つけることができません。 app.module.tsとmain.tsの

ERROR in ./application/main.ts
Module not found: Error: Cannot resolve 'file' or 'directory' ./app.module in C:...\main
@ ./application/main.ts 3:19-42 webpack: bundle is now VALID.

内容はfrom Angular.IO pageを持って来られました。

config.jsonが有効でないか、Windowsのパスに混乱が生じている可能性があるとの記事があります。しかし、ファイルが有効であることを確認しました.Webpackの設定にcontext:require("path").resolve(__dirname, "app"),を追加しようとしました。以前のファイルでさえも見つけられませんでしたapp.ts、私はそのアプローチを無視しました。

私はそれを機能させるために何日間も費やしてきましたが、私は疲れています。どうすればトラブルシューティングできますか？

Answer 1

は、あなたがあなたのwebpack.config.jsに無効なファイル拡張子の設定持っている - あなたが持っている必要があります代わりに

resolve: ["", ".js", ".ts"] 

のを

resolve: { 
    extensions: ["", ".js", ".ts"] 
} 

編集：

あなたがターゲットにする必要がある場合はwebpack2、あなたのケースでは、移行はかなり痛みを伴わずに済むでしょう。拡張子からemove ""：

resolve: { 
    extensions: [".js", ".ts"] 
}