我正在尝试根据这个
tutorial配置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$/,{
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"
}
}
解决方法
加载器选项应嵌套在模块对象中,如下所示：
module.exports = {
context: __dirname + '/app',module: {
loaders: [
{
test: /\.js$/,loaders: ['babel-loader']
},{
test: /\.jsx$/,{
test: /\.html$/,loader: "file?name=[name].[ext]"
}
]
}
};
我最后还添加了一个丢失的分号;)
