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()]

};

我将尝试尽快将其加载到GH上，但现在我的GH帐户和设备上的连接确实遇到了一些麻烦（ssh关键问题）。忍受我，希望以上内容对您有所帮助。

Answer 1

我想出了每个人....：facepalm：webpack-config.js&nbsp;应该被命名&nbsp;webpack.config.js