Question

我很反应。当我使用webpack打包我的代码时，有一个错误，但我找不到原因。这是错误：这是错误：

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试图将装载机改为＆＃34; babel-loader＆＃34;，但它没有用。

这里是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

Answer 1

在解析中添加json扩展程序 -

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

同时安装babel

npm install --save-dev babel

我在devDependencies

中没有看到它

检查它是否有效。

Answer 2

由于“模块”一词被写成'moudle'

，因此出现错误

webpack＆amp; babel使用时出现反应错误＆nbsp; npm start＆＃39;

2 个答案: