javascript - 尽管提供了带有 React 预设的 Babel 加载器，Webpack 2(测试版)仍无法处理 JSX

Question

我用过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)
  });
}

Answer 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，它应该(希望)全部工作。