Webpack（模块构建失败）

Question

我的错误是：

“错误在 ./src/index.js

模块构建失败（来自 ./node_modules/babel-loader/lib/index.js）：语法错误

：D:/cource/React project/webpacktutorial/src/index.js：意外的令牌(7:16)"

我不知道为什么每次我这样做都会出现这个错误，这可能是webpack的事情，我使用了CSS loader，babel loader或许多loader，但是这件事仍然没有解决。

索引.js

import React from 'react';

import ReactDOM from 'react-dom';

import './index.css';

import App from './App';

import * as serviceWorker from './serviceWorker';

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

serviceWorker.unregister(); 

webpack.config.js

const path = require( 'path');

module.exports = {

    mode: 'none',

   entry: path.join(__dirname,  '/src/index.js'),

   output: {

       filename:  'App.js',

       path: path.join(__dirname,  '/dist')},

   module:{

       rules:[{

          test: /\.js$/,

          exclude: /node_modules/,

          loader:  "babel-loader",

       }]

   }

}

包.json

{

  "name": "webpacktutorial",

  "version": "0.1.0",

  "private": true,

  "dependencies": {

    "react": "^16.8.6",

    "react-dom": "^16.8.6",

    "react-scripts": "3.0.1"

  },

  "scripts": {

    "start": "webpack-dev-server",

    "build": "webpack --mode production",

    "test": "react-scripts test",

    "eject": "react-scripts eject"

  },

  "eslintConfig": {

    "extends": "react-app"

  },

  "browserslist": {

    "production": [

      ">0.2%",

      "not dead",

      "not op_mini all"

    ],

    "development": [

      "last 1 chrome version",

      "last 1 firefox version",

      "last 1 safari version"

    ]

  },

  "devDependencies": {

    "babel-core": "6.26.3",

    "babel-loader": "7.1.5",

    "babel-preset-env": "1.7.0",

    "babel-preset-react": "6.24.1",

    "html-webpack-plugin": "3.2.0",

    "react-hot-loader": "^4.11.1",

    "webpack": "4.16.2",

    "webpack-cli": "3.1.0",

    "webpack-dev-server": "3.1.5"

  }

}