webpackで.jsxファイルをロード

Question

webpackを使用して.jsxファイルをロードする際に問題があります。 は私が持っているこのwebpack.config.js：

var webpack = require('webpack'); 

module.exports = { 
    entry: "./static/js/storage/src/index.js", 
    output: { 
     path: './static/js/storage/public/', 
     publicPath: "public/", 
     filename: "bundle.js" 
}, 

resolve: { 
    extensions: ['', '.js', '.jsx'] 
}, 

module: { 
    loaders: [ 
     { 
      test: /\.js$/, 
      loader: "babel-loader", 
      exclude: [/node_modules/, /public/], 
      query: { 
       plugins: ['transform-runtime'], 
       presets: ['es2015', 'stage-0', 'react'] 
      } 
     }, 
     { 
      test: /\.jsx$/, 
      loader: "react-hot!babel", 
      exclude: [/node_modules/, /public/] 
     } 
    ] 
} 
}; 

そして私は自分のアプリケーションのために、このパッケージがあります。

"dependencies": { 
    "jquery": "^3.1.0", 
    "react": "^15.2.1", 
    "react-dom": "^15.2.1" 
}, 
    "devDependencies": { 
    "autoprefixer-loader": "^3.2.0", 
    "babel": "^6.5.2", 
    "babel-core": "^6.10.4", 
    "babel-loader": "^6.2.4", 
    "babel-plugin-transform-runtime": "^6.9.0", 
    "babel-polyfill": "^6.9.1", 
    "babel-preset-es2015": "^6.9.0", 
    "babel-preset-react": "^6.11.1", 
    "babel-runtime": "^6.9.2", 
    "css-loader": "^0.23.1", 
    "file-loader": "^0.9.0", 
    "json-loader": "^0.5.4", 
    "jsx-loader": "^0.13.2", 
    "react": "^15.2.1", 
    "react-hot-loader": "^1.3.0", 
    "style-loader": "^0.13.1", 
    "url-loader": "^0.5.7", 
    "webpack": "^1.13.1" 
} 

と私はコンソールでのWebPACK実行しようとすると、私はこのエラーがあります：

Module parse failed: /static/js/storage/src/components/StorageApp.jsx Unexpected token (12:12) You may need an appropriate loader to handle this file type.

を私のwebpackはjsxファイルを読み込めません。私は問題が私のjsxローダーにあると思う。しかし、私は正確な問題は何か分かりません。

私は反応ホット、バベルローダー、プリセット付きのjsxローダーを使用しようとしますが、エラーはすべてのケースで同じです。 にこのローダーは動作しません：

test: /\.jsx$/, 
    loader: 'babel', 
    query: { 
     presets: ['react', 'es2015'] 
}, 

は、誰かがこの問題を助けることはできますか？

Answer 1

webpackの設定で 'public'フォルダを除外したため、コンパイラは.jsxファイルの解析に失敗します。

exclude: [/node_modules/], 

へ

行の下に更新しますWebPACKのファイル

exclude: [/node_modules/, /public/], 

の.jsと.jsxのローダーの両方のために。 [/ node_modules /、/公共/] `誤差に基づいて：

Answer 2

は、それが原因でその`除外の失敗だこの

loaders: [ 
     { 
      test: /\.jsx?$/, 
      loader: "babel-loader", 
      exclude: [/node_modules/, /public/], 
      query: { 
       plugins: ["react-hot-loader/babel", 'transform-runtime'], 
       presets: ['es2015', 'stage-0', 'react'] 
      } 
     } 
    ]