在我的webpack配置中，加载程序引用的错误/缺失在哪里？

Question

有一个相当典型的webpack配置，用一个新的项目无法捆绑我的任何反应代码。

错误读取

ERROR in ./index.jsx 47:6
Module parse failed: Unexpected token (47:6)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file.

这是我的webpack档案

const path = require('path');
const SRC_DIR = path.join(__dirname, '/client/src');
const DIST_DIR = path.join(__dirname, '/client/dist');

module.exports = {
  context: SRC_DIR,
  entry: './index.jsx',
  output: {
    filename: 'bundle.js',
    path: DIST_DIR
  },
  module: {
    rules: [
      {
        test: /\.jsx?/,
        exclude: /node_modules/,
        test: /\.css$/,
        use: ['style-loader', 'css-loader'],
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['@babel/preset-env', '@babel/preset-react'],
            plugins: ['@babel/plugin-proposal-class-properties']
          }
        }
      }
    ]
  }
};

有一种感觉，有一个相当简单的东西，我错过了，会感激任何洞察力的问题可能是什么。

更新-包括Dist树

├── client
│   ├── src
│   │   ├── config
│   │   ├── components
│   │   │   ├── Form.jsx
│   │   │   ├── TableList.jsx
│   │   │   └── TableListItem.jsx
│   │   └── index.jsx
│   └── dist
│       ├── index.html
│       └── bundle.js
├── server
│   └── index.js
├── README.md
├── package.json
├── package-lock.json
└── webpack.config.js

Answer 1

您需要babel-loader将您的.jsx转换为vanila。您需要在您的webpack.config文件中添加以下内容：

module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: "babel-loader",
        query: {
          presets: ["react"]
        }
      }
    ]
  },

希望这对你有用。