Javascript 使用react的网页包错误_Javascript_Webpack

Javascript 使用react的网页包错误

javascript webpack

Javascript 使用react的网页包错误,javascript,webpack,Javascript,Webpack,我正试图根据此配置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"; | i

我正试图根据此配置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>
|

这是反应组分

app/greeting.js

加载程序

选项应嵌套在

模块

对象中，如下所示：

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

我还在末尾添加了一个缺少的分号；）

当我用语法导入时

import Component from './components/component';

我得到了模块解析错误。要修复它，我必须指定

.jsx

，它就可以工作了

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

这根本不是配置错误。我在《辣手加载器》的《巴别塔6》节目中。

非常感谢！我一直在试图理解热模块替换如何与webpack一起工作，但在这一部分中遇到了问题。谢谢我已经按照您的回答将装载机添加到正确的位置，还添加了半彩色，我仍然得到相同的错误，您知道这是否是由于其他原因吗？@AbhinavSingi您是否安装了装载机？e、 g.

npm安装——保存dev babel loader文件加载器

，或者使用Mdd的

package.json

？@Almouro我做了

npm安装

。但是，如果我在前一种方法中指定版本号，两种方法都会产生相同的结果，对吗？@AbhinavSingi你能提供一个失败的要点吗？

<!DOCTYPE html>
<html>

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

  <body></body>

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

</html>

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

import Component from './components/component';

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