WebPack 4无法为React加载“ tsx”文件：“您可能需要适当的加载器来处理此文件类型。”

Question

摘要：

在创建React TypeScript应用程序并配置了WebPack 4之后，当我尝试解析<div class='normal'>A</div> <div class='line-height'>A</div> <div class='line-height-b'>A</div> <div class='height'>A</div>文件时，出现以下错误：

tsx

详细的输出不会指示它正在尝试使用哪个加载器，也没有指示匹配的文件模式。

如何解决此问题？

我在这里打开了一个关于错误消息的错误： https://github.com/webpack/webpack/issues/9025

此处是复制方法：

我创建了这样的React应用程序：

ERROR in ./src/App.tsx 6:16
Module parse failed: Unexpected token (6:16)
You may need an appropriate loader to handle this file type.

然后，我添加了此WebPack 4配置文件，并安装了必需的软件包：

npx create-react-app kontakt-manager --typescript

然后我尝试打包所有内容：

const path = require('path');

module.exports = {
    // change to .tsx if necessary
    entry: './src/App.tsx',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    resolve: {
        // changed from extensions: [".js", ".jsx"]
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            // changed from { test: /\.jsx?$/, use: { loader: 'babel-loader' } },
            { test: /\.(t|j)sx?$/, use: { loader: 'awesome-typescript-loader' } },
            // addition - add source-map support
            { enforce: "pre", test: /\.js$/, loader: "source-map-loader" }
        ]
    },
    externals: {
        "react": "React",
        "react-dom": "ReactDOM",
    },
    // addition - add source-map support
    devtool: "source-map"
}