webpackエラー：このファイルタイプを処理するために適切なローダーが必要な場合があります

Question

私は多くの方法を試していますが、私はstackoverflowを検索しても解決できません。 私は反応の初心者です。

エラー：

ERROR in ./public/js/index.jsx 
Module parse failed: /home/m/react/r-chat/front/public/js/index.jsx Line 3: Unexpected token 
You may need an appropriate loader to handle this file type. 
| /*'use strict';*/ 
| 
| import React, { Component, ProTypes } from 'react'; 
| import { Router, Route, IndexRoute, browserHistory, hashHistory } from 'react-router'; 
| import Avatar from './components/avatar.jsx'; 

そして、私のWebPACKのファイル：

var webpack = require('webpack'); 

module.exports = { 
    entry: './public/js/index.jsx', 
    output: { 
    path: './build', 
    filename: "bundle.js" 
}, 
module: { 
    loaders: [ 
     { 
      test: /\.js?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015','react'] 
      } 
     } 
    ] 
}, 
plugins: [ 
    new webpack.NoErrorsPlugin() 
] 
}; 

Answer 1

あなたは.jsxのためのローダーを必要とします。 .jsxファイルを使用しているので、.jsローダーは機能しません。

{ 
      test: /\.jsx?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015','react'] 
      } 
     } 

Answer 2

へ

変更

{ 
      test: /\.js?$/, 
      exclude: /node_modules/, 
      loader: 'babel', 
      query: { 
       presets: ['es2015','react'] 
      } 
     } 

あなたは、JSのためにテストしているのWebPACKの設定のあなたのローダーに参照してください？あなたはそれをJSXのために追加し、適切なローダーを使用する必要があります。

バベルバベル・ローダーを経由してあなたのためにこれを行うことができます。https://github.com/babel/babel-loader

すべてを行う必要がそうのようなテストにX、通りである：

loaders: [ 
    { 
     test: /\.jsx?$/, 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
      presets: ['es2015','react'] 
     } 
    } 
]