webpack - ошибка babel-загрузчика ширины tsx файлов

Question

когда я использую babel-loader для компиляции ie моего реактивного проекта, скажите, что анализ не выполнен. это мой файл 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"
                            ]
                        }
                    }
                ]
            }
        ]
    }
};