エラー：typescriptアプリケーションのwebpackを設定する際に 'file'または 'directory'を解決できません

Question

私のtypescriptデモアプリケーションのWebパックを設定しようとしています。私はWebPACKのコマンドを与えるとき、それはここでは、次のエラー

ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/app.ts in D:\ts1 
    resolve file 
    D:\ts1\src\app.ts doesn't exist 
    D:\ts1\src\app.ts.ts doesn't exist 
    D:\ts1\src\app.ts.html doesn't exist 
    D:\ts1\src\app.ts.js doesn't exist 
    resolve directory 
    D:\ts1\src\app.ts\package.json doesn't exist (directory description file) 
    D:\ts1\src\app.ts is not a directory (directory default file) 

    ERROR in Entry module not found: Error: Cannot resolve 'file' or 'directory' ./src/vendor.ts in D:\ts1 
    resolve file 
    D:\ts1\src\vendor.ts doesn't exist 
    D:\ts1\src\vendor.ts.ts doesn't exist 
    D:\ts1\src\vendor.ts.html doesn't exist 
    D:\ts1\src\vendor.ts.js doesn't exist 
    resolve directory 
    D:\ts1\src\vendor.ts\package.json doesn't exist (directory description file) 
    D:\ts1\src\vendor.ts is not a directory (directory default file) 

    ERROR in Error: Child compilation failed: 
    Entry module not found: Error: Cannot resolve 'file' or 'directory' D:\ts1\src \index.html in D:\ts1: 
    Error: Cannot resolve 'file' or 'directory' D:\ts1\src\index.html in D:\ts1 

をtrowingされ、私のwebpack.config.j

var webpack = require('webpack') 
    var HtmlWebpackPlugin = require('html-webpack-plugin') 
    module.exports = { 
     entry: { 
      app: './src/app.ts', 
      vendor: './src/vendor.ts' 
     }, 
     output: { 
      publicPath: 'http://localhost:8080/', 
      filename: '[name].js', 
     }, 
     watch: true, 
     resolve: { 
      extensions: [' ', '.html', '.ts', '.js'] 
     }, 
     module: { 
      loaders: [{ 
       test: /\.ts$/, 
       exclude: /node_modules/, 
       loader: 'ts-loader' 
      }, { 
       test: require.resolve('jquery'), 
       loader: 'expose?jQuery!expose?$' 
      }] 
     }, 
     plugins: [ 
      new webpack.optimize.CommonsChunkPlugin({ 
       name: ['app', 'vendor'] 
      }), 

      new HtmlWebpackPlugin({ 
       template: 'src/index.html' 
      }) 
     ], 
     devServer: { 
      historyApiFallback: true, 
      stats: 'minimal' 
     } 
    } 

マイpackage.jsonファイル

{ 
    "name": "ts1", 
    "version": "1.0.0", 
    "description": "", 
    "main": "src/app.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "", 
    "license": "ISC", 
    "devDependencies": { 
    "expose-loader": "^0.7.1", 
    "html-webpack-plugin": "^2.24.1", 
    "webpack": "^1.13.3" 
    }, 
    "dependencies": { 
    "jquery": "^3.1.1", 
    "ts-loader": "^1.0.0" 
    } 
} 

である私は、この問題を解決することができません問題。私はどこが間違っているのか分かりません。このエラーを解決するのに役立ちます。

おかげ

Answer 1

はwebpack.configの.jsonファイルは、package.jsonファイルと同じレベルにあなたのディレクトリのルートに配置されるようにsuposedされます。

ディレクトリ構造

App 
    package.json 
    webpack.config.json 
    src 
     app.ts 
     vendor.ts 

その後、あなたのWebPACKの設定ファイルには、これを実行します。

entry: { 
     app: './src/app.ts', 
     vendor: './src/vendor.ts' 
    } 

バグを修正した、あなたのエントリーと出力