反应js编译加载器问题

Question

I'm getting this issue while compiling loader not able to handle this file m not able to figureout as to why its not working as well i have the latest loader version

 ERROR in ./src/app/index.js
 Module parse failed: /var/www/reactjsbasics/src/app/index.js Unexpected token (8:3)
 You may need an appropriate loader to handle this file type.

index.js

import React from "react";
import {render} from "react-dom";

class App extends React.Component{
   render(){
    return(    
      <div>
            <h1>Hello</h1>
      </div>
    );
   }
}
render(<App/>,window.document.getElementById("app"));

   @ multi (webpack)-dev-server/client?http://localhost:8082 ./src/app/index.js

package.json

        {
      "name": "reactjsbasics",
     "version": "1.0.0",
      "description": "some basic rJS",
     "main": "index.js",
     "scripts": {
       "start": "npm run build",
      "build": "webpack -d && cp src/index.html dist/index.html && webpack-dev-server --content-base src/ --inline --watch",
        "build:prod": "webpack -p && cp src/index.html dist/index.html"
      },
      "keywords": [
        "reactjs"
     ],
 "author": "hir",
 "license": "MIT",
  "dependencies": {
   "babel-core": "^6.25.0",
 "react": "^15.6.1",
    "react-dom": "^15.6.1"
 },
 "devDependencies": {
   "babel-loader": "^7.1.1",
   "babel-preset-es2015": "^6.24.1",
  "babel-preset-react": "^6.24.1",
 "babel-preset-stage-2": "^6.24.1",
    "webpack": "^3.3.0",
 "webpack-dev-server": "^2.5.1"
 }
}

weback.config.js

var webpack=require("webpack");
 var path=require("path");
var DIST_DIR = path.resolve(__dirname,"dist");
var SRC_DIR = path.resolve(__dirname,"src");

  var config={
entry:SRC_DIR + "/app/index.js",
 output:{
 path:DIST_DIR+"/app",
 filename:"bundle.js",
 publicPath:"/app/"
},

  module:{
    loaders:[
  {
   test:"/\.js?/",
   include:SRC_DIR,
    loader:"babel-loader",
    query:{
         presets:["react","es2015","stage-2"]
        }
   }
      ]
    }
    };

module.exports = config

Answer 1

根据您的webpack.cofig.js，我认为您错过了导出配置对象的步骤。将这段代码添加到webpack.config.js的底部

module.exports = config; 

Answer 2

i made the following change an dit worked

         class app extends React.Component{
   render(){
    return(    
    <div>
        <h1>Hello</h1>
    </div>
   );
   }
  }
 render(<app/>,window.document.getElementById("app"));

I got the follwoing error i removed the "resolve" extn from webpack

Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema. - configuration.resolve.extensions[0] should not be empty. npm ERR! code ELIFECYCLE

then i got syntax error Module build failed: SyntaxError: Unexpected token, expected ; (4:6)

         import {render} from "react-dom";
        | Class fppex Extends React.Component{

failed: SyntaxError: Unexpected token, expected { (4:12)

     import {render} from "react-dom"; 
        class fppex Extends React.Component

after this it resolved