Compilation Issue with a React Login Screen

问题

I've been trying to compile the front end of this guide (git repository here) to get my head round JSX and React. I want to eventually use the code to produce a login screen for a Cordova app.

When trying to compile with webpack, for which I have the following package.json file setup:

{
  "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"
  }
}

But when I run webpack index.js run.js in the src folder of the repository, I get the following errors:

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

It's as if the compiler is treating the code as regular js and not treating it as jsx, despite having the babel-loader in the list of dependencies. Can someone explain to me how I can compile the code?

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',
                                      })
               ],

            };

来源：https://stackoverflow.com/questions/45774206/compilation-issue-with-a-react-login-screen

标签

reactjs

npm

Webpack

jsx

babel