Webpack不解析jsx文件

Question

我有這個jsx文件。 //反應代碼

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

class App extends React.Component { 
    render() { 
    return <p> Hello React!</p>; 
    } 
} 

render(<App/>, document.getElementById('app')); 

and this is my webpack.confg.js file 
//webpack config 

module.exports = { 
    entry: __dirname + '/assets/app/components/test/test.jsx', 
    output: { 
    path: __dirname, 
    filename: '/assets/app/components/test/test.min.js' 
    }, 
    module: { 
    loaders: [ 
     { 
     test: '/\.jsx?/', 
     exclude: '/node_modules/', 
     loader: 'babel', 
     query: { 
      presets:['es2015', 'react'] 
     } 
     } 
    ] 
    } 
} 

上運行的Web Pack中的給誤差

/assets/app/components/test/test.jsx 模塊解析失敗：/Users/joseph.antony/工作空間/ sloop/assets/app/components/test/test.jsx意外的令牌（6:11） 您可能需要一個合適的加載程序來處理此文件類型。 SyntaxError：意外的令牌（6:11）

Answer 1

這裏是我的模塊配置我用於所有創建的React項目。您將需要npm install我下面指定的軟件包。

module: { 
     loaders: [ 
      { 
       // Only run `.js` and `.jsx` files through Babel 
       test: /\.jsx?$/, 
       exclude: __dirname + "/node_modules", 
       loader: require.resolve("babel-loader"), 
       query: { 
        presets: [ 
         require.resolve('babel-preset-es2015'), 
         require.resolve('babel-preset-stage-0'), 
         require.resolve('babel-preset-react') 
        ] 
       } 
      } 
     ] 
    }, 

Answer 2

我相當肯定，你的問題是由於沒有正確表達的正則表達式測試：

此：

test: '/\.jsx?/', 
exclude: '/node_modules/', 

應該是：

test: /\.jsx?/, 
exclude: /node_modules/, 

正則表達式文字不包裹在字符串中。