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 包时，它给出的错误为

/assets/app/components/test/test.jsx 模块解析失败：/Users/joseph.antony/workspace/sloop/assets/app/components/test/test.jsx 意外令牌 (6:11) 您可能需要适当的加载程序来处理此文件类型。 SyntaxError: Unexpected token (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/,

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