使用webpack时无法解析文件，反应，反应 - dom

Question

我一直在用这种方式敲打头几个小时，而且我仍然无法解决问题。我想我已经尝试了几乎所有的实现，但我仍然没有得到它的工作。

错误消息

ERROR in ./app/main.js 
Module parse failed: /Users/DS/Code/tryouts/react-boilerplate/app/main.js Unexpected token (5:16) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (5:16) 
    at Parser.pp.raise (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:923:13) 
    at Parser.pp.unexpected (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:1490:8) 
    at Parser.pp.parseExprAtom (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:333:12) 
    at Parser.pp.parseExprSubscripts (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:228:19) 
    at Parser.pp.parseMaybeUnary (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:207:17) 
    at Parser.pp.parseExprOps (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:154:19) 
    at Parser.pp.parseMaybeConditional (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:136:19) 
    at Parser.pp.parseMaybeAssign (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:112:19) 
    at Parser.pp.parseExprList (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:660:23) 
    at Parser.pp.parseSubscripts (/Users/DS/Code/tryouts/react-boilerplate/node_modules/webpack/node_modules/acorn/dist/acorn.js:252:29) 

这是我webpack.config.js

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

var config = { 
    context: path.join(__dirname, 'app'), 
    entry: [ 
    './main.js', 
    ], 
    output: { 
    path: path.join(__dirname, 'www'), 
    filename: 'bundle.js', 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /src\/.+.js$/, 
     exclude: /node_modules/, 
     // loaders: ['babel', 'babel-loader?presets[]=react,presets[]=es2015'], 
     loaders: ['babel', 'babel-loader'] 
     } 
    ], 
    }, 
    resolveLoader: { 
    root: [ 
     path.join(__dirname, 'node_modules'), 
    ], 
    }, 
    resolve: { 
    root: [ 
     path.join(__dirname, 'node_modules') 
    ], 
    }, 
}; 
module.exports = config; 

这是我的package.json

{ 
    "name": "react-boilerplate", 
    "version": "1.0.0", 
    "description": "This is just a simple folder structure template to use for my `React` projects.", 
    "keywords": [], 
    "scripts": { 
    "compile": "webpack", 
    "start": "node server.js", 
    "test": "jest" 
    }, 
    "repository": { 
    "type": "git", 
    "url": "git+https://github.com/dantesolis/react-boilerplate.git" 
    }, 
    "author": "D/S", 
    "license": "MIT", 
    "main": "index.js", 
    "bugs": { 
    "url": "https://github.com/dantesolis/react-boilerplate/issues" 
    }, 
    "homepage": "https://github.com/dantesolis/react-boilerplate#readme", 
    "devDependencies": { 
    "babel": "^6.5.2", 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-react": "^6.11.1", 
    "jest-cli": "^13.2.3", 
    "webpack": "^1.13.1" 
    }, 
    "jest": { 
    "scriptPreprocessor": "./tools/preprocessor.js", 
    "unmockedModulePathPatterns": [ 
     "react" 
    ], 
    "testPathDirs": [ 
     "./src/", 
     "" 
    ] 
    }, 
    "dependencies": { 
    "babel-core": "^6.11.4", 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "express": "^4.14.0", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "react-router": "^2.6.0", 
    "webpack": "^1.13.1", 
    "webpack-dev-middleware": "^1.6.1" 
    } 
} 

Main.js

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 

ReactDOM.render(<App />, document.getElementById('app')); <= OFFENDING LINE 

App.js

import React from 'react'; 
import { Router, Route, Link, IndexRoute, hashHistory, browserHistory } from 'react-router'; 
import Counter from './Counter'; 

export default class App extends React.Component { 
    render() { 
     return (

      <div> 
       <Counter /> 
      </div> 
     ); 
    } 
} 

感谢您的帮助

Answer 1

，因为你提到Main.js其中有你需要从[ 'main.js' ]改变entry为['Main.js']以大写字母开头的第一个字母，正如我从您的webpack配置中看到的，您的应用程序代码位于app文件夹内并没有任何提及关于src文件夹中，因此，你需要改变从/src\/.+.js$/RegExp到/\.js$/

{ 
    test: /\.js$/, 
    exclude: /node_modules/, 
    loaders: ['babel', 'babel-loader?presets[]=react,presets[]=es2015'] 
}