Ошибка при использовании веб-пакета для компиляции jsx и js

Question

Я пытаюсь использовать koajs и реагировать на создание шаблонного приложения, чтобы позже использовать его в качестве отправной точки для проектов.

Я пытаюсь использовать webpack в качестве средства для компиляции моих реактивных jsx-файлов, но я получаю эту ошибку:

ERROR in ./src/js/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#loaders
| import App from "./components/App";
| 
> ReactDOM.render(<App />, document.getElementById('app'));

const path = require('path');

module.exports = {
    mode: "development",
    entry: './src/js/index.js',
    loader: {
        rules: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                use: {
                    loader: "babel-loader", 
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    },
    output: {
        path: path.join(__dirname, '/src/js'),
        filename: 'index_bundle.js'
    }
}

index.js:

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App";

ReactDOM.render(<App />, document.getElementById('app'));

Answer 1

module.exports = {
    mode: "development",
    entry: './src/js/index.js',
    module: {
        rules: [
            {
                test: /\.js$/, 
                exclude: /node_modules/, 
                use: {
                    loader: "babel-loader", 
                    options: {
                        presets: ["@babel/preset-env", "@babel/preset-react"]
                    }
                }
            }
        ]
    },
    output: {
        path: path.join(__dirname, '/src/js'),
        filename: 'index_bundle.js'
    }
}