WebpackとReactで予期しないトークン

Question

私はTypeScriptを使い始めましたが、Reactには比較的新しく、React & Webpack tutorialに従っています。いくつかの検索では、ほとんどの問題をそれ以外のもので解決することに成功しました。私が試してみて、活字体をtranspileするWebPACKのを実行すると、私が手：

ERROR in ./src/index.tsx 
Module parse failed: /home/X/Projects/react-typescript-tutorial/src/index.tsx Unexpected token (7:4) 
You may need an appropriate loader to handle this file type. 
| 
| ReactDOM.render(
|  <Hello compiler="TypeScript" framework="React" />, 
|  document.getElementById("example") 
|); 

私はthis previous questionで述べた解決策を試してみましたが、それは私の場合には影響を与えませんでした。私はこれがこの時点で、またはWebpackで最高のtypescript-loaderの問題であるかどうかは分かりません。

マイwebpack.config.jsファイル：

module.exports = { 
    entry: "./src/index.tsx", 
    output: { 
     filename: "bundle.js", 
     path: __dirname + "/dist" 
    }, 

    devtool: "source-map", 

    resolve: { 
     extensions: ["*", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] 
    }, 

    module: { 
     loaders: [ 
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" } 
     ], 

     rules: [ 
      { test: /\.js$/, enforce: "pre", loader: "source-map-loader" } 
     ] 
    }, 

    externals: { 
     "react": "React", 
     "react-dom": "ReactDOM" 
    }, 
}; 

マイtsconfig.json：

{ 
    "compilerOptions": { 
     "outDir": "./dist/", 
     "sourceMap": true, 
     "noImplicitAny": true, 
     "module": "commonjs", 
     "target": "es5", 
     "jsx": "react" 
    }, 
    "include": [ 
     "./src/**/*" 
    ] 
} 

と（はコメントで要求されるように）私のindex.tsxファイル：

import * as React from "react"; 
import * as ReactDOM from "react-dom"; 

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

ReactDOM.render(
    <Hello compiler="TypeScript" framework="React" />, 
    document.getElementById("example") 
); 

助けていただければ幸いです！

Answer 1

module.rulesとmodule.loadersの両方を定義しました。 webpackがmodule.rulesと表示された場合、互換性の理由からのみmodule.loadersが完全に無視されます。したがって、awesome-typescript-loaderはまったく使用されていません。それは単にmodules.rulesの下にすべてのルールを入れて修正するには：

module: { 
    rules: [ 
     { test: /\.tsx?$/, loader: "awesome-typescript-loader" }, 
     { test: /\.js$/, enforce: "pre", loader: "source-map-loader" } 
    ] 
},