的WebPack拋出約JSX組件錯誤

Question

我有以下JSX組件：

import React, { Component } from 'react'; 

class App extends Component { 
    render() { 
     return (
      <div className="app"> 
       <h2>Welcome to React</h2> 
      </div> 
     ) 
    } 
} 

export default App; 

和我的WebPack文件：

const path = require('path'); 
const webpack = require('webpack'); 
const ExtractTextPlugin = require('extract-text-webpack-plugin'); 

module.exports = { 
    context: path.resolve(__dirname, './src'), 
    entry: { 
     app: './index.jsx' 
    }, 
    output: { 
     filename: '[name].bundle.js', 
     path: path.resolve(__dirname, './dist/assets'), 
     publicPath: '/assets', 

    }, 
    devServer: { 
     contentBase: path.resolve(__dirname, './src') 
    }, 
    module: { 
     rules: [ 
      { 
       test: /\.jsx$/, 
       exclude: [/node-modules/], 
       use: [ 
       { 
        loader: "babel-loader", 
        options: { presets: ["es2015"] } 
       } 
       ] 
      }, 
      { 
       test: /\.css$/, 
       use: ExtractTextPlugin.extract({ 
        use: [{ 
         loader: 'css-loader', 
         options: { importLoaders: 1 }, 
        }], 
       }), 
      }, 
      { 
       test: /\.(sass|scss)$/, 
       use: ["style-loader", "css-loader", "sass-loader"] 
      } 
     ] 
    }, 
    resolve: { 
     modules: [ 
      path.resolve(__dirname, './src'), 
      'node_modules' 
     ] 
    }, 
    plugins: [ 
     new webpack.optimize.CommonsChunkPlugin({ 
      name: 'common' 
     }), 
     new ExtractTextPlugin({ 
      filename: '[name].bundle.css', 
      allChunks: true 
     }) 
    ] 
} 

然而

當我運行：

node_modules/.bin/webpack -d 

我得到的以下錯誤：

Answer 1

添加 「通天預設反應」

npm install babel-preset-react 

，並添加 「預設」 選項通天裝載機在webpack.config.js

下面是一個例子webpack.config.js：

module: { 
    loaders: [{ 
     exclude: /node_modules/, 
     loader: 'babel', 
     query: { 
     presets: ['react', 'es2015', 'stage-1'] 
     } 
    }] 
    }