WebPACKのビルドが失敗する：私のtest.jsxファイル</p> <p>：</p> <pre><code>import React from 'react'; import { render } from 'react-dom'; render( <button>OK!</button> ); </code></pre> <p>を反応させ、JSXファイル

Question

で予期しないトークンが、私はWebPACKのは、次のように動作するようになって問題が発生したことだし、実際にいくつかの助けをいただければ幸いです私webpack.config.js：

const webpack = require('webpack'); 
const commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js'); 

module.exports = { 
    entry: { 
    front_desk: './front/client/test', 
    }, 
    resolve: { 
    extensions: ['.js', '.jsx'], 
    }, 
    output: { 
    path: 'front/public/js', 
    filename: '[name].js', // Template based on keys in entry above 
    }, 
    module: { 
    loader: 'babel-loader', 
    }, 
    plugins: [commonsPlugin], 
}; 

と私の.babelrc：

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

と正確なエラー：

ERROR in ./front/client/test.jsx 
Module parse failed: /../front/client/test.jsx Unexpected token (5:2) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (5:2) 

Answer 1

私はあなたがJSXファイルのための適切なローダーを設定する必要があると思う：

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

babel-loader info