ts-loaderを使用しようとしたときにWebpackがエラーをスローする

Question

私はこの問題に関するすべてのGoogleの結果を調べましたが、私のケースではうまくいかない理由は見つかりませんでした。私はこのエラーを取得：

ERROR in ./front/src/ts/index.ts 
Module parse failed: 
/Users/Folder/OtherFolder/index.ts Unexpected token (4:10) 
You may need an appropriate loader to handle this file type. 
| alert("Hello World!"); 
| 
| var myName:string = "John Doe"; 
| 

はこれが私のwebpack.config.jsです：

module.exports = { 
    entry: './front/src/ts/index.ts', 
    output: { 
     filename: './front/dist/js/bundle.js' 
    }, 
    watch: true, 
    resolve: { 
     extensions: ['.tsx', '.ts', '.js'] 
    }, 
    module: { 
     loaders: [ 
      { 
       test: /\.js$/, 
       exclude: /node_modules/, 
       loader: 'babel', 
       query: { 
        presets: ['es2015'], 
        plugins: ['transform-class-properties'] 
       } 
      }, 
      { 
       enforce: 'pre', 
       test: /\.js$/, 
       loader: "source-map-loader" 
      }, 
      { 
       enforce: 'pre', 
       test: /\.tsx?$/, 
       use: 'source-map-loader', 
       loader: 'ts-loader' 
      } 
     ] 
    }, 
    devtool: 'inline-source-map', 
}; 

マイtsconfig.json：

{ 
    "compilerOptions": { 
     "outDir": "./front/dist/js", 
     "sourceMap": true, 
     "noImplicitAny": true, 
     "module": "commonjs", 
     "target": "es5", 
     "jsx": "react", 
     "allowJs": true 
    } 
} 

何らかの理由で、活字体の構文は無効とみなされますバンドルは作成されません。私はTSの後にBabelを実行しようとしましたが、その逆もありますが、それでも解決しません。どのような問題が起こっているのか、それを修正する方法は？

Answer 1

You can install the TypeScript compiler and the TypeScript loader from npm by running: 

npm install --save-dev typescript ts-loader 



tsconfig.json: 
{ 
    "compilerOptions": 
    { 
     "outDir": "./dist/", 
     "sourceMap": true, 
     "noImplicitAny": true, 
     "module": "commonjs", 
     "target": "es5", 
     "jsx": "react", 
     "allowJs": true 
    } 
} 

webpack.config.js 

A basic webpack with TypeScript config should look along these lines: 

module.exports = { 
    entry: './index.ts', 
    output: { 
    filename: 'bundle.js', 
    path: __dirname 
    }, 
    module: { 
    rules: [ 
     { 
     test: /\.tsx?$/, 
     loader: 'ts-loader', 
     exclude: /node_modules/, 
     } 
    ] 
    }, 
    resolve: { 
    extensions: [".tsx", ".ts", ".js"] 
    } 
};