Webpack Build fehlschlagen: unerwartetes Token mit reagieren-jsx

Question

Datei Ich habe Probleme Webpack immer mit dem folgenden zu arbeiten und würde schätzen wirklich etwas Hilfe:

meine test.jsx Datei:

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

render(
    <button>OK!</button> 
); 

mein 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], 
}; 

und meine .babelrc:

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

und die genauen Fehler:

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

Ich glaube, Sie müssen die entsprechenden Lader jsx Dateien einzurichten:

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

babel-loader info