反应js编译加载器问题

时间:2017-07-20 07:52:25

标签: javascript reactjs

我在编译加载程序时无法处理此文件时遇到此问题而无法弄清楚为什么它不能正常工作我有最新的加载程序版本

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

index.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"]
        }
   }
      ]
    }
    };

的package.json

#import <Reachability.h>

weback.config.js

if ([Reachability currentReachabilityStatus] == NotReachable) {
  ...
}

module.exports = config

2 个答案:

答案 0 :(得分:0)

根据你的webpack.cofig.js我认为你错过了导出配置对象在webpack.config.js底部添加这段代码

module.exports = config; 

答案 1 :(得分:0)

我做了以下更改,dit工作

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

我遇到了以下错误,我从webpack中删除了“resolve”extn

  

无效的配置对象。 Webpack已使用与API架构不匹配的配置对象进行初始化。     - configuration.resolve.extensions [0]不应为空。   错误的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

之后解决了