使用webpack编译jsx和js时出错

Question

我正在尝试使用koajs和reactjs来制作样板应用程序，以便以后用作项目的起点。

我正在尝试使用webpack来编译我的React 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'
    }
}