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/, 

正则表达式文字不包裹在字符串中。