Webpack 巴贝尔似乎不会翻译JSX？

我正在学习frontendmasters.com上的教程，并试图简化其中一个设置。我在键入Thread build时看到以下错误，我认为这是因为babel在运行webpack之前没有摆脱JSX：

ERROR in ./js/ClientApp.jsx
Module build failed: SyntaxError: Unexpected token (5:25)

  3 | import { BrowserRouter, Route, Switch } from 'react-router-dom';
  4 | 
> 5 | const HelloWorld = () => <h1>Hello World!</h1>;
    |                          ^
  6 | 
  7 | const App = () => (
  8 |   <BrowserRouter>

我的webpack.config.js是：

const path = require('path');
const webpack = require('webpack');

module.exports = {
  context: __dirname,
  entry: "./js/ClientApp.jsx",
  devtool: "cheap-eval-source-map",
  output: {
    path: path.join(__dirname, 'public'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '.json']
  },
  stats: {
    colors: true,
    reasons: true,
    chunks: true
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        loaders: 'babel-loader',
      }
    ]
  }
}

我的js/ClientApp.jsx只是一个简单的语法有效的文件，我将其省略，因为StackOverflow已经在抱怨这个消息主要是代码

---

有人知道我做错了什么，以及为什么babel没有正确处理JSX吗？

看起来babel还没有配置为正确传输您的代码

鉴于您使用的是es2015+React JSX语法，快速方法包括安装Babel和as-dev依赖项，并配置.babelrc文件以使用它们：

{
  "presets": [
    "es2015",
    "react"
  ]
}

---

如果你想调整你的BabelStudio，你可以考虑只安装你实际需要的BabelPosits，而不是上面提到的只是一组巴别塔插件的预设，

是的，看起来我也需要一个.BabelRC文件。现在一切正常。

{
  "presets": [
    "es2015",
    "react"
  ]
}