Question

运行webpack --mode development时，出现以下错误：

修改评论要求查看我的.babelrc，添加如下 -我已经尝试将索引和应用程序文件的所有组合都作为.jsx文件，或者作为.jsx文件，但无济于事。 -我也尝试过删除并读取所有节点模块作为节点（v10.x.x）的最新版本

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转换jsx，试试看

.babelrc

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

Answer 2

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

webpack-config.js应该被命名为webpack.config.js

Webpack打包ReactDOM导致加载程序错误

2 个答案: