Javascript 网页包可以'；t分析子组件中的材质ui按钮

我正在尝试将一些React组件与webpack捆绑在一起

但是当我启动webpack--mode=development时，我得到了以下错误：

模块分析失败：意外令牌（6:4） 您可能需要适当的加载程序来处理此文件类型，目前没有配置加载程序来处理此文件。看见 |常量OwnButton=（）=>{

---

|return（问题是您将Babel加载程序配置为仅干预

.js

文件

尝试更改：

test://\.js$//

->

test://\.（（js）|（jsx））$//

---

这将使加载程序也适用于

.jsx

文件。

问题是您将Babel加载程序配置为仅干预

.js

文件

尝试更改：

test://\.js$//

->

test://\.（（js）|（jsx））$//

这将使加载程序也适用于

.jsx

文件

const path = require('path');

module.exports = {
   entry: './src/app.js', // relative path
   output: {
      path: path.join(__dirname, 'public'), // absolute path
      filename: 'js/bundle.js' // file name
   },
   module: {
      rules: [
         {
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
         }
      ]
   }
};

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import Button from '@material-ui/core/Button';
import OwnButton from './Components/OwnButton';

const template = <Button>Hello from react jsx</Button>;

ReactDOM.render(template, document.getElementById('root'));
ReactDOM.render(<OwnButton/>, document.getElementById('React-OwnButton'));

import Button from '@material-ui/core/Button';

const OwnButton = () => {
  return (
    <Button color='secondary' variant='outlined'>
      Hello from my own component
    </Button>
  );
};

export default OwnButton;

{
   "presets": ["@babel/preset-env", "@babel/preset-react"]
}