React引入jsx文件报错Module parse failed: Unexpected token

引入jsx文件报错Module parse failed: Unexpected token

routerConfig.js:

import React from "react";
import ReactDOM from 'react-dom'
import Page1 from './pages/Page1.jsx'

ReactDOM.render(
    <Page1/>,
    document.getElementById('root')
)

Page1.jsx:

import React from "react";

class Page1 extends React.Component{
    constructor(props) {
        super(props);
    }

    render(){
        return(
            <div className="page1">
				This is page1
            </div>
        )
    }
}

export default Page1

报错Module parse failed: Unexpected token…

原因：webpack.config.js文件配置的时候只匹配了js文件，没有匹配jsx文件
解决：此时我们在webpack.config.js配置文件中加入jsx就可以了，如下代码：

module:{
	rules:[
		{
                test:/\.(js|jsx)$/,  // 这里加入jsx
                use:{ 
                    loader: 'babel-loader',
                    options:{  //用babel-loader需要把es6->es5
                        presets:[
                            '@babel/preset-env',
                            '@babel/preset-react'  //yarn add @babel/core @babel/preset-react -D
                        ],
                        plugins:[
                            '@babel/plugin-proposal-class-properties',
                            // '@babel/plugin-syntax-dynamic-import'
                        ]
                    }
                },
                exclude:/node_module/,   //优化项(2):排除某个文件
                // include:path.resolve('src')  //包含
            },
	]
}

修改后效果：正常显示内容