Webpack打包ReactDOM導致加載器錯誤

Question

當我運行webpack --mode development ，出現以下錯誤：

編輯要求查看我的.babelrc的注釋，添加在下面-我已嘗試將索引和應用程序文件的所有組合都作為.jsx文件（或作為.jsx文件），但無濟於事。 -我還嘗試刪除並讀取所有節點模塊作為節點（v10.xx）的最新版本

ERROR in ./src/index.js 4:16
  Module parse failed: Unexpected token (4:16)
  You may need an appropriate loader to handle this file type.
  | import ReactDOM from "react-dom";
  | import app from "./app.js";
 ReactDOM.render(<app />, document.getElementById("root"));

app.js

 import React, {Component} from "react"; import {hot} from "react-hot-loader"; import "./app.css"; class app extends Component{ render(){ return( <div className="app"> <h1> Hello, World! </h1> </div> ); } } export default app; 

index.js

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

webpack.config.js

 const path = require("path"); const webpack = require("webpack"); module.exports = { entry: "./src/index.jsx", mode: "development", module: { rules: [ { test: /\\.(js|jsx)$/, exclude: /(node_modules|bower_components)/, loader: "babel-loader", options: { presets: ["@babel/env"] } }, { test: /css\\*\\.css$/, use: ["style-loader", "css-loader"] } ] }, resolve: { extensions: ["*", ".js", ".jsx"] }, output: { path: path.resolve(__dirname, "dist/"), publicPath: "/dist/", filename: "bundle.js" }, devServer: { contentBase: path.join(__dirname, "public/"), port: 3000, publicPath: "http://testsite.test/", hotOnly: true }, plugins: [new webpack.HotModuleReplacementPlugin()] }; 

 { "presets": [ "env", "react", "stage-0" ], "plugins": [ "transform-class-properties", "transform-decorators", "transform-react-constant-elements", "transform-react-inline-elements" ] } 

我將嘗試盡快將其加載到GH上，但現在我的GH帳戶和設備上的連接確實遇到了一些麻煩（ssh關鍵問題）。 忍受我這一點，希望以上內容對您有所幫助。

編輯＃2：這是我的github回購https://github.com/johnfwebdev/testsite.test

Answer 1

像這樣用babel轉換react jsx，試試看

.babelrc

{
  "presets": [["@babel/preset-env"]],
  "plugins": [
    "@babel/plugin-transform-react-jsx"
  ]
}

Answer 2

我想出了每個人....：facepalm：

webpack-config.js應該已經被命名為webpack.config.js