webpack & babel 打包react项目错误

Question

this is Error:

ERROR in ./app/main.jsx
Module parse failed: /home/liudong/Public/proj/Homepage/app/main.jsx Unexpected token (8:7)
You may need an appropriate loader to handle this file type.
SyntaxError: Unexpected token (8:7)
    at Parser.pp$4.raise (/home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:2221:15)
    at Parser.pp.unexpected (/home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:603:10)
    at Parser.pp$3.parseExprAtom (/home/liudong/Public/proj/Homepage/node_modules/acorn/dist/acorn.js:1822:12)

package.json中

"dependencies": {
    "react": "^15.4.0-rc.4",
    "react-dom": "^15.4.0-rc.4",
    "react-router": "^2.8.1"
  },
  "devDependencies": {
    "babel-core": "^6.17.0",
    "babel-loader": "^6.2.5",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "css-loader": "^0.25.0",
    "json-loader": "^0.5.4",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.16.2"
  }

webpack.config.js 中:

module.exports = {
    devtool: 'eval-source-map',
    entry : __dirname + '/app/main.jsx',
    output: {
        path: __dirname + '/public',
        filename: '[name]-[hash].js'
    },
     resolve: {
        extensions: ['', '.js', '.jsx']
    },
    moudle: {
        loaders:[
            {
                test: /\.json$/,
                loader:"json"
            },
            {
                test: /\.jsx?$/,
                exclude:'/node_modules/',
                loader:'babel',
                query: {
                    presets: ['es2015', 'react']
                }
            },
            {
                test: /\.css$/,
                loader: 'style!css?modules'
            }
        
        ]
    }
}

main.js//

//main.jsx
import React from 'react'
import {render} from 'react-dom'
import Greeter from './Greeter.jsx'

import './main.css'

render(<Greeter />, document.getElementById('container'));//这里为什么会有问题？

//Greeter.jsx

import React, {Component} from 'react'
import config from './config.json'


class Greeter extends Component {
    render() {
        return (
            <div>
                {config.greetText}
            </div>
        )
    }
}

export default Greeter 

Answer 1

好吧，真是抱歉，耽误大家时间，问题找到了。是webpack.config.json中的module单词拼写错误。。。真是太粗心了。

Answer 2

要打死，webpack.config.json 用 js 语法？还有那个教程里边说要把 js 配置 改成 json 配置的。。。

Answer 3

注意你的webpack配置文件，应该是webpack.config.js，是nodejs的一个模块，返回json格式的配置信息对象，修改回来应该没什么大问题~~

Answer 4

{
    test: /\.jsx?$/,
    exclude:'/node_modules/',
    loader:'babel',
    query: {
        presets: ['es2015', 'react']
    }
}

这个地方 exclude:'/node_modules/', 要改成 exclude: /node_modules/

RegExp 和 String 不一样。