反應js編譯加載器問題

Question

我在編譯加載器無法處理此文件時遇到此問題-無法弄清為什么它不能正常工作我擁有最新的加載器版本

 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 =配置

Answer 1

根據您的webpack.cofig.js，我認為您錯過了導出配置對象的步驟。將這段代碼添加到webpack.config.js的底部

module.exports = config; 

Answer 2

我做了以下修改

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

我收到以下錯誤，我從webpack中刪除了“ resolve” extn

無效的配置對象。 已使用與API模式不匹配的配置對象初始化Webpack。 -configuration.resolve.extensions [0]不能為空。 npm ERR！ 代碼ELIFECYCLE

然后我得到語法錯誤模塊構建失敗：SyntaxError：意外的令牌，預期； （4：6）

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

失敗：SyntaxError：意外令牌，應為{（4:12）

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

在此之后它解決了