Gulpからのコンパイル "このファイルタイプを処理するには、適切なローダーが必要な場合があります。"

Question

私はgulpで構築された既存のプロジェクトを持っており、単純な「Hello World」Reactアプリケーションを追加しようとしています。 gulpを実行すると、端末にエラーを生成しませんが、ブラウザのコンソールに私がエラーを持っている：

"Uncaught Error: Module parse failed: 
/private/var/www/mysite.com/public_html/app/back/js/index.jsx Unexpected token (7:6) You may need an appropriate loader to handle this file type.". 

フォルダ構造は次のとおりです。

public_html/ 
    app/ 
    back/ 
     js/ 
     index.jsx 
     bundle.js  #this should get created by the transpile 
    .babelrc 
    .gulpfile 
    package.json 
    webpack.config.js 

index.jsx：

import React from 'react'; 
import ReactDOM from 'react-dom'; 

var Test = React.createClass({ 
    render: function() { 
    return (
     <h1>Hello World</h1> 
    ); 
    } 
}); 

ReactDOM.render(<Test /> , document.getElementById('app')); 

パッケージ.json：

... 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-env": "^1.2.0", 
    "babel-preset-es2015": "^6.22.0", 
    "browser-sync": "^2.13.0", 
    "del": "^2.2.2", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-clean-css": "^2.0.10", 
    "gulp-header": "^1.8.7", 
    "gulp-jshint": "^2.0.4", 
    "gulp-less": "^3.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-uglify": "^1.5.4", 
    "gulp-watch": "^4.3.10", 
    "merge-stream": "^1.0.1", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "run-sequence": "^1.2.2", 
    "webpack": "^2.2.1" 
    } 

gulpfile.js：

var gulp = require('gulp'); 
... 
var webpack = require('webpack') 
var webpack_config = require('./webpack.config.js'); 
... 
gulp.task('webpack', [] ,(done) => { 
    webpack(webpack_config, function(err, stats) { 
     if(err) { 
      console.log('error'); 
     } 
     else { 
      console.log('no error'); 
     } 
     done(); 
    }); 
}); 

webpack.config.js：

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    entry: './app/back/js/index.jsx', 
    output: { 
     path: './dist/app/back/js', 
     filename: 'bundle.js' 
    }, 
    module : { 
     loaders : [ 
     { 
      test : /\.jsx?/, 
      include : './app/back/js', 
      loader : 'babel-loader', 
      query: { 
       presets: ['es2015'] 
      } 
     } 
     ] 
    } 
}; 

module.exports = config; 

.babelrc：

{ 
    "presets" : ["es2015"] 
} 

私はSOから複数のソリューションを試みたが、エラーが解消されません。

ありがとうございました。

Answer 1

私はそれを動作させることができましたが、 Tomの指示に従って使用しているのWebPACKのバージョンは何

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    entry: './app/back/js/index.jsx', 
    output: { 
     path: __dirname + '/app/back/js', 
     filename: 'bundle.js' 
    }, 
    module : { 
     loaders : [ 
     { 
      test : /\.jsx?$/, 
      exclude: /node_modules/, 
      loader : 'babel-loader' 
     } 
     ] 
    } 
}; 

module.exports = config; 

Answer 2

このバベルのプリセットがありません：babel-preset-react。

ので package.json：

... 
    "devDependencies": { 
    "babel-core": "^6.23.1", 
    "babel-loader": "^6.3.2", 
    "babel-preset-env": "^1.2.0", 
    "babel-preset-react": "^6.23.0", 
    "babel-preset-es2015": "^6.22.0", 
    "browser-sync": "^2.13.0", 
    "del": "^2.2.2", 
    "gulp": "^3.9.1", 
    "gulp-babel": "^6.1.2", 
    "gulp-clean-css": "^2.0.10", 
    "gulp-header": "^1.8.7", 
    "gulp-jshint": "^2.0.4", 
    "gulp-less": "^3.1.0", 
    "gulp-rename": "^1.2.2", 
    "gulp-replace": "^0.5.4", 
    "gulp-uglify": "^1.5.4", 
    "gulp-watch": "^4.3.10", 
    "merge-stream": "^1.0.1", 
    "react": "^0.14.7", 
    "react-dom": "^0.14.7", 
    "run-sequence": "^1.2.2", 
    "webpack": "^2.2.1" 
    } 

.babelrc：

{ 
    "presets" : ["es2015", "react"] 
} 

そしてwebpack.config.js内部のいくつかの小さな設定に誤りがあります：

var webpack = require('webpack'); 
var path = require('path'); 

var config = { 
    entry: './app/back/js/index.jsx', 
    output: { 
     path: './dist/app/back/js', 
     filename: 'bundle.js' 
    }, 
    module : { 
     loaders : [ 
     { 
      test : /\.jsx?$/, 
      include : './app/back/js', 
      loader : 'babel-loader' 
     } 
     ] 
    } 
}; 

module.exports = config;