Webpack错误与React相关

10

我正在尝试根据这个教程配置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]"
    }
  ]
}

这里是React组件

app/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
);

app/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"
  }
}
2个回答

17

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]"
      }
    ]
  }
};

我还在最后添加了一个缺失的分号 ;)


非常感谢!我一直在尝试理解webpack中的热模块替换是如何工作的,但卡在了这个部分。谢谢! - Mdd
根据您的答案,我已将加载器放置在正确的位置,并添加了分号,但仍然出现相同的错误。您知道是否可能由于其他原因引起的吗? - Abhinav Singi
@AbhinavSingi 你有安装加载器吗?例如 npm install --save-dev babel-loader file-loader 或者只是使用 Mdd 的 package.json 进行 npm install - Almouro
@Almouro 我执行了 npm install。但是如果我在前面的方法中指定版本号,两种方法应该得到相同的结果,对吧? - Abhinav Singi
+100. 你最棒了。我犯了多愚蠢的错误啊! - Alfred
显示剩余2条评论

1
当我使用以下语法导入时:

import Component from './components/component';

我遇到了模块解析错误。为了解决它,我必须指定 .jsx,这样就可以解决了。
import Component from `./components/component.jsx`. 

这并不是配置错误。我使用带有热加载的babel 6。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接