Webpack .tsxファイルを処理することができません

Question

私はTypeScriptを使って新しい反応プロジェクト（非常に基本的なプロジェクト）を作成しています。私はwebpackを使用してjavascriptファイルに自分のタイスクリプトファイルをバンドルしています。私が使用しています構成されている以下

ERROR in ./src/components/parent/home.tsx 
Module parse failed: Unexpected token (9:2) 
You may need an appropriate loader to handle this file type. 
| 
| render(
| <Home />, 
| rootEl 
|); 

：しかし、WebPACKのを実行している間、私は次のエラーを取得しています

tsconfig.jsonは - 活字私が使用しています2.6.1

{ 
    "compilerOptions": { 
    "target": "es5", 
    "module": "commonjs", 
    "jsx": "preserve", 
    "sourceMap": true, 
    "outDir": "dist", 
    "strict": true, 
    "noImplicitAny": true, 
    "strictNullChecks": true, 
    "moduleResolution": "node", 
    "baseUrl": "./src/", 
    "typeRoots": [ 
     "node_modules/@types" 
    ], 
    "allowSyntheticDefaultImports": true 
    }, 
    "exclude" : [ 
    "node_modules" 
    ], 
    "include" : [ 
    "./src/" 
    ] 
} 

webpack.config.js - 私は使用していますウェブパック3.8.1

const path = require('path'); 

module.exports = { 
    entry: "./src/components/parent/home.tsx", 

    output: { 
    path: path.resolve(__dirname, "dist/app"), 
    filename: "home.js" 
    }, 

    module: { 

    rules: [ 
     { 
     test: /\.(ts|tsx)$/, 
     include: path.join(__dirname, "src"), 
     use: ["babel-loader", "awesome-typescript-loader"] 
     } 
    ] 
    }, 

    resolve: { 

    modules: [ 
     "node_modules", 
     path.resolve(__dirname, "src") 
    ], 

    extensions: [".ts", ".tsx", ".js", ".jsx", ".json"] 

    }, 

    node: { 
     fs: 'empty', 
     net: 'empty', 
     tls: 'empty' 
    }, 

    devtool: "source-map" 
} 

home.tsx

import * as React from 'react'; 
import { render } from 'react-dom'; 

import Home from '../children/homeContent'; 

const rootEl = document.getElementById('app'); 

render(
    <Home />, 
    rootEl 
); 

homeContent.tsx

import React from 'react'; 

export default class homeContent extends React.Component<any, any> { 

    public render() { 
     return (
      <div> 
       Hello I am home Page!! 
      </div> 
     ); 
    } 
} 

.babelrc

{ 
    "presets": ["env", "react"] 
} 

私は間違って何をしていますか？

更新：

私も<Home />ライン上で私のhome.tsxに以下のエラーを取得しています。

[ts] 
Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'. 
    Types of property 'type' are incompatible. 
    Type 'string | ComponentClass<any> | StatelessComponent<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'. 
     Type 'ComponentClass<any>' is not assignable to type 'string | StatelessComponent<any> | ComponentClass<any>'. 
     Type 'React.ComponentClass<any>' is not assignable to type 'React.ComponentClass<any>'. Two different types with this name exist, but they are unrelated. 
      Type 'React.Component<any, React.ComponentState>' is not assignable to type 'React.Component<any, React.ComponentState>'. Two different types with this name exist, but they are unrelated. 
      Types of property 'render' are incompatible. 
       Type '() => string | number | false | Element | ReactPortal | Element[] | null' is not assignable to type '() => false | Element | null'. 
       Type 'string | number | false | Element | ReactPortal | Element[] | null' is not assignable to type 'false | Element | null'. 
        Type 'string' is not assignable to type 'false | Element | null'. 
import Home 

Answer 1

私はいくつかのことを試してみましたが、最終的にすべてをゼロから試してみました。私が使用した構成は以下の通りです。

tsconfig.json

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

webpack.config.js

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

    devtool: "source-map", 

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

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

    watch: true 
}; 

index.tsx

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

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

ReactDOM.render(
    <Hello />, 
    document.getElementById("example") 
); 

Hello.tsx

import * as React from "react"; 

export class Hello extends React.Component { 
    render() { 
     return <h1>Hello this is home page!</h1>; 
    } 
}