2016-10-15 91 views
0

我是一個新的反應。當我使用webpack打包代碼時,出現錯誤,但我找不到原因。這裏是錯誤: 這是錯誤:webpack&babel使用'npm start'時反應錯誤

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) 

這裏是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' 
     } 

    ] 
} 

//依賴關係的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" 
} 

我試過HAVA要將加載器更改爲「babel-loader」,但它不起作用。

這裏是main.jsx:

//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 
+0

您可以添加'main.jsx'文件嗎? –

+0

我已經加入了 –

+0

嘗試刪除你的css後從主進口 – abhirathore2006

回答

0

添加json擴展在決心 -

resolve: { 
    extensions: ['', '.json', '.js', '.jsx'] 
    } 

還要安裝babel

npm install --save-dev babel 

我沒有看到它在你的devDependencies

檢查是否正常工作。

0

由於'模塊'這個單詞被寫爲'moudle'而出現錯誤

+0

哦。你自己想出了格拉格。 @HioryLiu – WitVault