React Webpack Config error - You may need an appropriate loader to handle this file type

I was trying to learn about webpack I follow the instructions on the documentation but it gives me an error of.

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
|
| render.render(
>     <React.Fragment>
|         <App/>
|     </React.Fragment>

here's my webpack.config.js

import path from 'path';

module.exports = {
  entry: path.resolve(__dirname, './src/App.js'),
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: 'bundle.js',
  },
  devServer: {
    historyApiFallback: true,
  },
  module: {
    rules: [
      {
        test: /\.js$|jsx/,
        use: "babel-loader"
      }
    ]
  

} };

and here's my babel config.

module.exports = {
    presets: [
        "@babel/preset-env", "@babel/preset-react"
    ]
}