react得一个demo，感觉配置项都没问题，仍然报jsx语法错误，为啥捏？

Question

刚学react，环境搭建好了，执行npm run start 后一直报错，看错误信息，说解析不了jsx语法，实在解决不了了，来求助大家了。

这是webpack.config.js

let path=require('path');
let HtmlWebpackPlugin=require('html-webpack-plugin');
module.exports={
    entry:'./src/main.js',
    output:{
        filename:'bundle.js',
        path:path.resolve(__dirname+'dist')
    },
    module:{
        rules:[
            {
                test:/\.jsx$/,
                use:'babel-loader',
                exclude:/node_modules/
            },
            {
                test:/\.less$/,
                use:['style-loader','css-loader','less-loader']
            },
            {
                test:/\.(jpg|png|gif)$/,
                use:'url-loader'
            }
        ]
    },
    devtool:'source-map',
    plugins:[
        new HtmlWebpackPlugin({
            template:'./src/index.html'
        })
    ]
};

这是入口文件main.js

import React,{Component} from 'react';
import {render} from 'react-dom'
 class Home extends Component{
    render(){
        return (
            <div>
                Home
            </div>
        )
    }
}
render(<Home />,document.getElementById('app'));

这是babelrc

{
  "presets":["es2015","stage-0","react"],
  "plugins":["babel-plugin-transform-decorators-legacy"]
}

这是package.json部分配置

这是错误信息

Answer 1

/.jsx$/无法匹配main.js

Answer 2

webpack loader 写错了，改成 /\.jsx?$/ 来匹配 js 文件

还有就是，jsx 里面好像使用的 component 也不对，入口组件 home 里面应该不能使用自己

Answer 3

第一个mudules的rules中的test值改为 test: /\.(js|jsx)$/,