Не получается собрать проект через WebPack

Собирая проект на вебпаке получил следующюю ошибку:

ERROR in ./src/index.js 5:16 Module parse failed: Unexpected token (5:16) 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#loader

Index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";
ReactDOM.render(<App/>,document.getElementById("root"))

App.js :

import React from "react";
const App  = () => {
       return <div>
        <h1>Hello WOlrd</h1>
        </div>
             }
       export default App

         Webpack.config.js:
   const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
entry: "./src/index.js",
output: {
path: path.join(__dirname, "/dist"),
filename: "index-bundle.js"
     },
 module: {
  rules: [
    {
 test: /\.js$/,
  exclude: /node_modules/,
     use: ["babel-loader"]
    },
    {
   test: /\.css$/,
use: ["style-loader", "css-loader"]
     }
  ]
  },
 plugins: [
new HtmlWebpackPlugin({
 template: "./src/index.html"
})
]
    };