jsx结尾的文件不能被import引入么，为什么解析不了

难道这个jsx不能被解析么，但是我的webpack配置里面是有配置的啊，配置也在下方。

另外需要将这些js文件引入到入口文件中才能被解析，不然是不行的，这个需要注意下。

webpack的配置文件如下：

const path=require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
const {CleanWebpackPlugin}=require('clean-webpack-plugin')
module.exports={
    mode:"development",
    context: process.cwd(),//上下文目录是当前的工作
    devtool:'none',
    entry:{
        index:'./index.js'
    },
    output:{
        path:path.resolve(__dirname,'./dist'),
        filename:"[name].js"
        // filename:'main.js'
    },
    module:{
        rules:[
            {
                test:/\.(png|jpe?g|gif)$/,
                use:{
                    loader:'url-loader',
                    options:{
                        name:"[name]_[hash].[ext]",
                        outputPath:'/images',
                        limit:5000,
                    }
                }
            },
            {
                test:/\.css$/,
                use:["style-loader",'css-loader','postcss-loader'],
                // user:[MiniCssExtractPlugin.loader,'css-loader','postcss-loader']

            },
            // {
            //     test:/\.jsx?$/,
            //     use:{
            //         loader:'babel-loader',
            //         options:{
            //             "presets":[
            //                 ["@babel/preset-env",
            //                 {
            //                     "targets":{
            //                         "edge": "17",
            //                         "firefox": "60",
            //                         "chrome": "67",
            //                         "safari": "11.1"
            //                     },
            //                     useBuiltIns:'usage',
            //                     corejs:2
            //                 }
            //                 ],
            //                 "@babel/preset-react"
            //             ],
            //             plugins:[
            //                 "@babel/plugin-syntax-dynamic-import",
            //                 ["@babel/plugin-proposal-decorators", { legacy: true }],  //我：应该使用来使用装饰器
            //                 ["@babel/plugin-proposal-class-properties", { loose: true }]
            //             ]
            //         },
                    
            //     },
            //     include:path.join(__dirname,'src'),
            //     exclude:/node_modules/

            // }
            {
                test: /\.jsx?$/,
                use: {
                  loader: "babel-loader",
                  options: {
                    presets: ["@babel/preset-env","@babel/preset-react"],
                    plugins: [
                      ["@babel/plugin-proposal-decorators", { legacy: true }],  //我：应该使用来使用装饰器
                      ["@babel/plugin-proposal-class-properties", { loose: true }]
                    ]
                  },
                },
                include: path.join(__dirname, "src"),
                exclude: /node_modules/
              },
        ]
    },
    plugins:[
        new CleanWebpackPlugin(),
        new htmlWebpackPlugin({
            template:'./src/index.html',
            filename:'index.html'
        })
    ],
    devServer:{
        contentBase:'./dist',
        open:true,
        port:8081,
        hot:true,
    }
}