webpack - tsx 文件宽度 babel-loader 错误

Question

当我使用 babel-loader 编译我的反应项目时，告诉我解析失败。 这是我的 webpack.config.js 文件。

 module: { rules: [ { test: /^\.([jt])sx$/, include: path.resolve(__dirname, 'src'), use: [ { loader: "babel-loder", options: { "presets": [ ["@babel/preset-env"], "@babel/preset-react", ["@babel/preset-typescript"] ] } } ] } ] }

当我运行 webpack cli 时，出现如下错误：

Module parse failed: Unexpected token (3:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to 
process this file. See https://webpack.js.org/concepts#loaders
| import React, {PureComponent} from 'react';
> export interface ILazyImageProps extends React.DetailsHTMLAttributes<HTMLImageElement>

看起来“导出接口”会引发错误。

但是使用 babel cli 就可以了。 谁能告诉我为什么？

Answer 1

此配置应该可以帮助您：

webpack.config.js

module.exports = {
    // Your configuration of entry and output
    module: {
        rules: [
            {
                test: /\.(j|t)sx?$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "babel-loader",
                        options: {
                            presets: [
                                "@babel/env",
                                "@babel/react",
                                "@babel/typescript"
                            ]
                        }
                    }
                ]
            }
        ]
    }
};