Webpackがjsxファイルを解析していません

Question

私はこのjsxファイルを持っています。 は//そのモジュールが失敗したパース

/assets/app/components/test/test.jsx としてエラーを与えるパックウェブを実行する上でコード

import React from 'react'; 
import {render} from 'react-dom'; 

class App extends React.Component { 
    render() { 
    return <p> Hello React!</p>; 
    } 
} 

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

and this is my webpack.confg.js file 
//webpack config 

module.exports = { 
    entry: __dirname + '/assets/app/components/test/test.jsx', 
    output: { 
    path: __dirname, 
    filename: '/assets/app/components/test/test.min.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: '/\.jsx?/', 
     exclude: '/node_modules/', 
     loader: 'babel', 
     query: { 
      presets:['es2015', 'react'] 
     } 
     } 
    ] 
    } 
} 

に反応する：/Users/joseph.antony/をworkspace/sloop/assets/app/components/test/test.jsx予期しないトークン（6:11） このファイルタイプを処理するには、適切なローダーが必要な場合があります。 SyntaxError：予期しないトークン（6:11）

Answer 1

私が作成したすべてのReactプロジェクトに使用した私のモジュール構成です。以下に指定したパッケージをnpm installにする必要があります。

module: { 
     loaders: [ 
      { 
       // Only run `.js` and `.jsx` files through Babel 
       test: /\.jsx?$/, 
       exclude: __dirname + "/node_modules", 
       loader: require.resolve("babel-loader"), 
       query: { 
        presets: [ 
         require.resolve('babel-preset-es2015'), 
         require.resolve('babel-preset-stage-0'), 
         require.resolve('babel-preset-react') 
        ] 
       } 
      } 
     ] 
    }, 

Answer 2

私はあなたの問題が原因正しく表現されていない正規表現のテストにあることをかなり確信している：

この：

test: '/\.jsx?/', 
exclude: '/node_modules/', 

は次のようになります。

test: /\.jsx?/, 
exclude: /node_modules/, 

正規表現リテラルは文字列で囲まれません。