尽管提供了带有 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 中的很多东西都改变了，我说的不再适用。

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

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

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

Webpack 2 (beta) fails to handle JSX despite being provided with a Babel loader with React preset

javascript

bundling-and-minification

reactjs

babeljs

webpack-2