WebpackのJSXモジュールをES6でインポートできない

Question

何らかの理由でWebpackに.JSXファイルからモジュールをインポートできないようです。私がWebpackを実行しようとするたびに、私はこのメッセージを受け取るでしょう：

ERROR in ./src/Example.jsx 
Module parse failed: /path/to/project/src/Example.jsx Unexpected token (6:12) 
You may need an appropriate loader to handle this file type. 
SyntaxError: Unexpected token (6:12) 

事はです。 ./src/Example.jsxには大したことはありません。実際には、これはそれが含まれていることすべてです：

import React from 'react'; 


export default class Example extends React.Component{ 
    render() { 
    return (<h2>Hello world!!</h2>); 
    } 
}; 

WebPACKのは、私は私のindex.jsxファイル内のクラスを持っていたすべての問題を持っていなかったが、私は出て、独自のファイルのWebPACKに突然couldn図の全てを、それを移動したとき何をすべきか。私はbabel-plugin-transform-react-jsxを使用してこれを解決しようとしましたが、それは私の問題を解決するように見えませんでした。 Webpackに適切に.JSXファイルを変換/解析させるには、何をする必要がありますか？

/* package.json */

{ 
    ..., 
    "dependencies": { 
    "babel-loader": "^6.2.4", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1", 
    "webpack": "1.13.1" 
    }, 
    "devDependencies": { 
    "concurrently": "^2.2.0", 
    "eslint": "^3.1.1", 
    "eslint-plugin-react": "^5.2.2", 
    "jest-cli": "^13.2.3", 
    "react-addons-test-utils": "^15.2.1", 
    "webpack-dev-server": "^1.14.1" 
    }, 
    "scripts": { 
    "build": "webpack -p", 
    "dev": "webpack-dev-server --port 9999", 
    "start": "npm run build && python -m SimpleHTTPServer 9999", 
    "test": "jest --verbose --coverage --config jest.config.json" 
    } 
} 

/* webpack.config.js */

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

var BUILD_DIR = path.resolve(__dirname, 'build/'); 
var SOURCE_DIR = path.resolve(__dirname, 'src/'); 

module.exports = { 
    entry: SOURCE_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /[^\.spec]+\.jsx$/, 
     include: SOURCE_DIR, 
     loader: 'babel' 
     } 
    ] 
    } 
}; 

/* .baberc */

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

/* SRC/index.jsx */

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

import Example from './Example' 


ReactDOM.render(<Example />, document.getElementById('floor-plan')); 

Answer 1

を試してみてください。私はテストプロパティに問題を切り分けました。

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

var BUILD_DIR = path.resolve(__dirname, 'build/'); 
var SOURCE_DIR = path.resolve(__dirname, 'src/'); 

module.exports = { 
    entry: SOURCE_DIR + '/index.jsx', 
    output: { 
    path: BUILD_DIR, 
    filename: 'bundle.js' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [ 
     { 
     test: /\.jsx?$/, 
     include: SOURCE_DIR, 
     exclude: /node_modules/, 
     loader: 'babel-loader', 
     query: { 
      presets: ['es2015', 'react'] 
     }, 
     } 
    ] 
    } 
}; 

Answer 2

理由はjs輸入の代わりjsxとしてこれを扱いますindex.jsx

のWebPACKに import Example from './Example'である可能性があります。

は、私はこれらのいくつかの変更を扱うあなたのセットアップを得た

import Example from './Example.jsx'