Где ошибка / отсутствие ссылки на загрузчик в моем конфиге webpack?

Question

Иметь достаточно шаблонную конфигурацию веб-пакета, которая при новом проекте не может связать любой мой код реакции.

Ошибка чтения

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.

Вот мой файл веб-пакета

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 в ваниль javascript. Вам нужно добавить следующий файл webpack.config:

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

Надеюсь, это работает для вас.