javascript 响应的 Webpack 错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32020605/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Webpack error with react
提问by Mdd
I am trying to configure webpack according to this tutorialand keep getting the same error. I am having trouble debugging these 2 messages:
我正在尝试根据本教程配置 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>
|
Here is my webpack.configure.js
这是我的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]"
}
]
}
Here is the react components
这是反应组件
app/greeting.js
应用程序/greeting.js
import React from "react/addons";
export default React.createClass({
render: function() {
return (
<div className="greeting">
Hello, {this.props.name}!
</div>
);
},
});
app/app.js
应用程序/app.js
import React from "react/addons";
import Greeting from "./greeting";
React.render(
<Greeting name="World"/>,
document.body
);
app/index.html
应用程序/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Webpack + React</title>
</head>
<body></body>
<script src="app.js"></script>
</html>
In case it's helpful, here's my package.json with dependencies
如果有帮助，这是我的 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"
}
}
回答by Almouro
the loadersoption should be nested in a moduleobject like so:
该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]"
}
]
}
};
I also added a missing semi-colon at the end ;)
我还在最后添加了一个缺少的分号 ;)
回答by Daniel Lizik
When I was importing with the syntax
当我使用语法导入时
import Component from './components/component';
I was getting the module parse error. To fix it, I had to specify .jsxand it worked
我收到模块解析错误。要修复它，我必须指定.jsx并且它有效
import Component from `./components/component.jsx`.
It wasn't a config error at all. I'm on babel 6 with hot loader.
这根本不是配置错误。我在带热加载器的 babel 6 上。
