React登录屏幕的编译问题

Question

我一直在尝试编译this指南（git repository here）的前端，以便了解JSX和React。我想最终使用代码为Cordova应用程序生成登录屏幕。

尝试使用webpack进行编译时，我为其设置了以下package.json文件：

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-es2015": "^6.24.1",
    "html-webpack-plugin": "^2.30.1",
    "lodash": "^4.17.4",
    "react": "^0.14.9",
    "react-router-dom": "^4.1.2",
    "react-scripts": "^0.8.5",
    "router": "^1.3.1",
    "script-loader": "^0.7.0",
    "superagent": "^3.5.2",
    "webpack": "^3.5.4",
    "webpack-cordova-plugin": "^0.1.6"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "react": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-dropzone": "^3.10.0",
    "react-file-tree": "0.0.8",
    "react-router-dom": "^4.0.0",
    "superagent": "^3.4.4"
  },
  "scripts": {
    "start": "webpack-dev-server"
  }
}

但是当我在存储库的webpack index.js run.js文件夹中运行src时，我收到以下错误：

Hash: e0d1e2feea6b71367144
Version: webpack 3.5.4
Time: 844ms
 Asset    Size  Chunks                    Chunk Names
run.js  727 kB       0  [emitted]  [big]  main
  [79] ./index.js 170 bytes {0} [built]
 [178] ./App.js 385 bytes {0} [built] [failed] [1 error]
 [179] ./index.css 255 bytes {0} [built] [failed] [1 error]
    + 177 hidden modules

ERROR in ./App.js
Module parse failed: C:\Users\Jake\command line work\LearnD\Iteration 0\app\frontend\src\App.js Unexpected token (21:19)
You may need an appropriate loader to handle this file type.
|   componentWillMount(){
|     var loginPage =[];
|     loginPage.push(<LoginScreen appContext={this}/>);
|     this.setState({
|                   loginPage:loginPage
 @ ./index.js 3:0-24

ERROR in ./index.css
Module parse failed: C:\Users\Jake\command line work\LearnD\Iteration 0\app\frontend\src\index.css Unexpected token (1:5)
You may need an appropriate loader to handle this file type.
| body {
|   margin: 0;
|   padding: 0;
 @ ./index.js 4:0-21

就好像编译器将代码视为常规js而不是将其视为jsx，尽管在依赖项列表中有babel-loader。有人可以向我解释如何编译代码吗？

webpack.config

const path = require('path');
var webpack = require ('webpack');

var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
     entry: './app/frontend/src/index.js',
     output: {
         path: path.resolve('dist'),
         filename: 'run.js',
                  },
     module: {
         loaders: [{test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/},
                   {test: /\.jsx$/, loader: 'babel-loader', exclude: /node_modules/},
                   {test: /\.js$/, loader: 'lodash-loader', exclude: /node_modules/},
                   {test: /\.js$/, loader: 'script-loader', exclude: /node_modules/},
                   {test: /\.jsx$/, loader: 'script-loader', exclude: /node_modules/},
                   {test: /\.css$/, loader: 'css-loader', exclude: /node_modules/}
                  ]},

    plugins: [  new  HtmlWebpackPlugin({
                        template: 'index.template.ejs',
                        inject: 'body',
                                      })
               ],

            };