Javascript 使用Web包开发服务器运行react，使用babel作为加载程序

My index.js在第一个简单的HTML元素上不断得到解析异常

我已经试着跟随了很多帖子，并试图在不同的配置方式之间进行更改，但我一直遇到这个错误。我尝试使用巴贝尔作为加载程序或巴贝尔加载程序，但仍然没有用。 我的节点模块具有所需的依赖项，因此似乎没有遗漏任何内容。谁能指出我做错了什么

错误

ERROR in ./app/index.js Module parse failed: /mnt/c/development_box/react_sandbox/app/index.js Unexpected token (8:3) You may need an appropriate loader to handle this file type. SyntaxError: Unexpected token (8:3)
    at Parser.pp$4.raise (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1822:12)
    at Parser.pp$3.parseExprSubscripts (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21)
    at Parser.pp$3.parseMaybeUnary (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1692:19)
    at Parser.pp$3.parseExprOps (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1637:21)
    at Parser.pp$3.parseMaybeConditional (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1620:21)
    at Parser.pp$3.parseMaybeAssign (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1597:21)
    at Parser.pp$3.parseParenAndDistinguishExpression (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1861:32)
    at Parser.pp$3.parseExprAtom (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1796:19)
    at Parser.pp$3.parseExprSubscripts (/mnt/c/development_box/react_sandbox/node_modules/webpack/node_modules/acorn/dist/acorn.js:1715:21) @ multi main

这是我的文件和配置

package.json

{
  "name": "react_sandbox",
  "version": "0.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "BSD-2-Clause",
  "dependencies": {
    "webpack": "~1.14.0",
    "babel-core": "~6.21.0",
    "babel-loader": "~6.2.10",
    "babel-preset-es2015": "~6.18.0",
    "babel-preset-react": "~6.16.0",
    "react": "~15.4.1",
    "react-dom": "~15.4.1"
  },
  "devDependencies": {
    "webpack-dev-server": "~1.16.2"
  }
}

webpack.config.js

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

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = 
{
    entry : APP_DIR + '/index.js',
    output : 
    {
        path : BUILD_DIR,
        filename : 'bundle.js',
        publicPath : '/'
    },
    devtool : 'source-map',
    devServer : 
    {
        inline : 'true',
        contentBase : BUILD_DIR,
        port : 3333
    },
    module :
    {
        loader : 
        [
        {
            test : /\.js?/,
            include : APP_DIR,
            loader : 'babel',
            query : 
            {
                presets : [ 'es2015', 'react' ] 
            }   

        }
        ]

    }
}

module.exports = config

import React from 'react'
import {render} from 'react-dom'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render(){
        return (
            <p>Hello World!</p>
        );
    }
}

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

index.js

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

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = 
{
    entry : APP_DIR + '/index.js',
    output : 
    {
        path : BUILD_DIR,
        filename : 'bundle.js',
        publicPath : '/'
    },
    devtool : 'source-map',
    devServer : 
    {
        inline : 'true',
        contentBase : BUILD_DIR,
        port : 3333
    },
    module :
    {
        loader : 
        [
        {
            test : /\.js?/,
            include : APP_DIR,
            loader : 'babel',
            query : 
            {
                presets : [ 'es2015', 'react' ] 
            }   

        }
        ]

    }
}

module.exports = config

import React from 'react'
import {render} from 'react-dom'
import ReactDOM from 'react-dom'

class App extends React.Component {
    render(){
        return (
            <p>Hello World!</p>
        );
    }
}

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

---

我怀疑您的webpack.config.js配置不正确。它应该是

module:{loaders:[{test:/\.js？$/，loaders:['babel-loader']，exclude:/node\u modules/}]

非常感谢，问题只是我的webpack.config.jsI编写的loader而不是loaders中的一个“s”。呸！！！这让我卡住了两天，应该是复制粘贴而不是自己键入：）没问题，我会要求关闭此问题，因为这是一个印刷错误：）