Reactjs Web包和React中出现意外令牌

我不熟悉打字脚本，也不太熟悉如何反应，只是试着跟着节奏走。通过一些搜索，我成功地解决了大多数问题，除了一个问题外，它稍微过时了。当我尝试运行Webpack传输Typescript时，我得到：

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")
| );

My 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")
);

import*as React from“React”；
从“react dom”导入*作为react dom；
从“/components/Hello”导入{Hello}；
ReactDOM.render(
,
document.getElementById（“示例”）
);

---

非常感谢您的帮助

您定义了

module.rules

和

module.loaders

。当webpack看到

module.rules

时，它会完全忽略

module.loaders

，这些加载程序仅出于兼容性原因而存在。因此，您的

awesome typescript加载程序根本没有被使用。要修复它，只需将所有规则放在
模块下。规则
：

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

还想看看index.tsx fileHi@ArshabhAgarwal，我也添加了index.tsx内容。
module: {
   rules: [
      { test: /\.tsx?$/, loader: "awesome-typescript-loader" },
      { test: /\.js$/, enforce: "pre", loader: "source-map-loader" }
   ]
},