與反應的Webpack錯誤

我試圖根據此tutorial配置webpack並一直得到相同的錯誤。我無法調試這些2個消息：與反應的Webpack錯誤

ERROR in ./app.js 
Module parse failed: /path/react/react-webpack-babel/app/app.js Line 1: Unexpected reserved word 
You may need an appropriate loader to handle this file type. 
| import React from "react"; 
| import Greeting from "./greeting"; 
| 

ERROR in ./index.html 
Module parse failed: /path/react/react-webpack-babel/app/index.html Line 1: Unexpected token < 
You may need an appropriate loader to handle this file type. 
| <!DOCTYPE html> 
| <html> 
|

這裏是我的webpack.configure.js

module.exports = { 
    context: __dirname + '/app', 
    entry: { 
    javascript: "./app.js", 
    html: "./index.html" 
    }, 
    output: { 
    filename: 'app.js', 
    path: __dirname + '/dist' 
    }, 
    loaders: [ 
    { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader'] 
    }, 
    { 
     test: /\.jsx$/, 
     loaders: ['babel-loader'] 
    }, 
    { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]" 
    } 
    ] 
}

這裏是反應的組分

應用程序/爲greeting.js

import React from "react/addons"; 

export default React.createClass({ 
    render: function() { 
    return (
     <div className="greeting"> 
     Hello, {this.props.name}! 
     </div> 
    ); 
    }, 
});

應用程序/ app.js

import React from "react/addons"; 
import Greeting from "./greeting"; 

React.render(
    <Greeting name="World"/>, 
    document.body 
);

應用/ index.html的

<!DOCTYPE html> 
<html> 

    <head> 
    <meta charset="utf-8"> 
    <title>Webpack + React</title> 
    </head> 

    <body></body> 

    <script src="app.js"></script> 

</html>

在情況下，它是有幫助，這是我與依賴的package.json

{ 
    "name": "project", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "private": true, 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "author": "Me", 
    "license": "ISC", 
    "devDependencies": { 
    "babel-core": "^5.8.22", 
    "babel-loader": "^5.3.2", 
    "file-loader": "^0.8.4", 
    "webpack": "^1.11.0" 
    }, 
    "dependencies": { 
    "react": "^0.13.3" 
    } 
}

來源

2015-08-15 Mdd

loaders選項應嵌套在module對象像這樣：

module.exports = { 
    context: __dirname + '/app', 
    entry: { 
    javascript: "./app.js", 
    html: "./index.html" 
    }, 
    output: { 
    filename: 'app.js', 
    path: __dirname + '/dist' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.js$/, 
     exclude: /node_modules/, 
     loaders: ['babel-loader'] 
     }, 
     { 
     test: /\.jsx$/, 
     loaders: ['babel-loader'] 
     }, 
     { 
     test: /\.html$/, 
     loader: "file?name=[name].[ext]" 
     } 
    ] 
    } 
};

我也加在最後一個缺失的分號）

來源

2015-08-16 20:11:53 Almouro

非常感謝！我一直在試圖理解熱模塊更換如何與webpack一起工作，但卻一直停留在這一部分。謝謝！！！ – Mdd

我已經按照您的答案在正確的位置添加了裝載機，還添加了半色，我仍然收到相同的錯誤，您是否知道它是否可能是由於其他原因？ –

@AbhinavSingi你有沒有安裝裝載機？例如'npm install --save-dev babel-loader file-loader'或者'npm install'與Mdd的'package.json'？ – Almouro

當我的語法

import Component from './components/component';

我正在模塊解析錯誤導入。爲了解決這個問題，我必須指定.jsx和它的工作

import Component from `./components/component.jsx`.

這不是一個配置錯誤的。我在用裝載機的babel 6上。

來源

2016-03-27 04:17:31

與反應的Webpack錯誤

回答

相關問題