webpack无法构建typescript react

Question

我正在尝试和webpack一起构建一个typescript react项目。我按照typescript教程进行了操作，但一直收到错误` `module parse failed：...您可能需要一个适当的加载器

我可以使用tsc进行编译，所以问题不在typescript本身。

在以下代码片段中，故障发生在<div>上

ReactDOM.render(
    <div>Something</div>,
    document.getElementById("content")
);

如果我将<div>替换为null，则webpack会进行编译。

我不确定我在这里错过了什么，我猜是jsx/tsx是如何加载的？

我的webpack.config是

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

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add `.ts` and `.tsx` as a resolvable extension.
        extensions: ['.ts', '.tsx', '.js']
      },
      module: {
        rules: [
          // all files with a `.ts` or `.tsx` extension will be handled by `ts-loader`
          {
            test: /\.tsx?$/,
            use: 'awesome-typescript-loader',
          }
        ]
      },
      externals: {
        'react': 'React',
        'react-dom': 'ReactDOM',
      },
};

-更新

React和React-Dom包含在文件index.tsx中，格式为

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

JSX在tsconfig文件中以"jsx": "react"的形式启用

此外，.babelrc还包括

{
  "plugins": ["transform-runtime","array-includes"],
  "presets" : ["env", "react", "stage-2"]
}

-更新2-我怀疑这是一个问题，因为webpack加载程序加载不正确。如果我将加载器从

module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "awesome-typescript-loader" },

至

module: {
        rules: [
            // All files with a '.ts' or '.tsx' extension will be handled by 'awesome-typescript-loader'.
            { test: /\.tsx?$/, loader: "some-random-loader-name" },

我本以为会出现找不到加载器的错误，但我仍然得到了与使用awesome-typescript-loader时相同的行为。

Answer 1

这很愚蠢，但以防其他人遇到类似的问题。

我的package.json中有一个无服务器模块的条目，其中包括一个旧版本的webpack。

而不是使用全局版本，webpack使用的是旧版本，但没有报告错误。

我检查了我的npm list webpack -g，但没有检查npm list webpack