尽管提供了带有 React 预设的 Babel 加载器，但 Webpack 2 (beta) 无法处理 JSX答案

【问题标题】：Webpack 2 (beta) fails to handle JSX despite being provided with a Babel loader with React preset尽管提供了带有 React 预设的 Babel 加载器，但 Webpack 2 (beta) 无法处理 JSX
【发布时间】：2016-12-24 22:57:21
【问题描述】：

我使用this guide from Webpack docs 作为参考来创建一个带有 HMR 的 Webpack 配置，但我收到一条错误消息，指出我没有 JSX 加载器。我已经安装了参考中列出的所有需要的软件包。请注意，我也曾尝试将我的 Babel 配置放在 .babelrc 中，但它给了我相同的结果。

ERROR in ./src/index.js
Module parse failed: /Users/macbem/Documents/Coding/Back/typeahead-todo/src/index.js Unexpected token (10:2)
You may need an appropriate loader to handle this file type.
|
| ReactDOM.render(
|   <AppContainer>
|     <App />
|   </AppContainer>,
 @ multi main

我的配置文件在项目的根目录下，.js 文件在/src/。我的 webpack 配置如下：

// webpack.config.js
const { resolve } = require('path');
const webpack = require('webpack');

module.exports = {
  entry: [
    'react-hot-loader/patch',
    'webpack-dev-server/client?http://localhost:8080',
    'webpack/hot/only-dev-server',
    './index.js'
  ],
  output: {
    filename: 'bundle.js',
    path: resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  context: resolve(__dirname, 'src'),
  devtool: 'inline-source-map',
  devServer: {
    hot: true,
    contentBase: resolve(__dirname, 'dist'),
    publicPath: '/'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          {
            loader: 'babel-loader',
            options: {
              "presets": [
                  [ "es2015", { "modules": false } ],
                  "stage-2",
                  "react"
                ],
              "plugins": [
                "react-hot-loader/babel"
              ]
            }
          },
        ],
        exclude: /node_modules/
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader?modules',
          'postcss-loader',
        ],
      },
    ],
  },

  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.NamedModulesPlugin()
  ],
};

另外，这是我的 index.js 文件：

import React from 'react';
import ReactDOM from 'react-dom';

import { AppContainer } from 'react-hot-loader';
// AppContainer is a necessary wrapper component for HMR

import App from './components/App';

ReactDOM.render(
  <AppContainer>
    <App />
  </AppContainer>,
  document.getElementById('root')
);

// Hot Module Replacement API
if (module.hot) {
  module.hot.accept('./components/App', () => {
    const NewApp = require('./components/App').default
    render(NewApp)
  });
}

【问题讨论】：

标签： javascript reactjs babeljs bundling-and-minification webpack-2

【解决方案1】：

编辑：我之前说的都是错的，忽略它，很多东西在 webpack 2 中改变了，我说的不再适用了。

继续自己尝试，我想我发现了问题：链接中的 webpack 版本（beta.20）实际上并不支持“module.rules.use”语法。我不确定哪个版本的 beta 开始支持它，但 beta.25 似乎可以工作。

因此，如果您执行npm uninstall webpack --save 和npm install webpack@2.1.0-beta.25 --save，它应该（希望）一切正常。

【讨论】：

我忘了指出，我一开始也尝试过这种方法，但它给了我相同的结果 - 我将编辑问题详细信息。
对不起，忽略我之前的回答，请看编辑后的回答。
非常感谢。我已经对 docs repo 进行了此更改并进行了 PR，并且它已被合并，因此其他人不必面对这个问题。