Babel-Loader不解析ReactDom.render

Question

我正在通过Youtube编写一个React教程，并匹配了他的webpack.config和package.json文件，但是在运行webpack-dev-server时我遇到了一个奇怪的错误

package.json

{
  "name": "react-tutorials",
  "version": "0.0.0",
  "description": "",
  "main": "webpack.config.js",
  "dependencies": {
    "babel-plugin-add-module-exports": "^0.1.2",
    "babel-plugin-react-html-attrs": "^2.0.0",
    "babel-plugin-transform-class-properties": "^6.3.13",
    "babel-plugin-transform-decorators-legacy": "^1.3.4",
    "babel-preset-stage-0": "^6.3.13",
    "bootstrap-without-jquery": "^1.0.5",
    "history": "^1.17.0",
    "react": "^0.14.6",
    "react-dom": "^0.14.6",
    "react-router": "^1.0.3",
    "webpack-dev-server": "^1.14.1"
  },
  "devDependencies": {
    "babel": "^6.23.0",
    "babel-cli": "^6.26.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^6.4.1",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "webpack": "^1.15.0"
  },
  "scripts": {
    "dev": "webpack-dev-server --content-base src --inline --hot"
  },
  "author": "",
  "license": "ISC"
}

webpack.config

var debug = process.env.NODE_ENV !== "production";
var webpack = require('webpack');
var path = require('path');

module.exports = {
  context: path.join(__dirname, "src"),
  devtool: debug ? "inline-sourcemap" : null,
  entry: "./js/client.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: ['react', 'es2015', 'stage-0'],
          plugins: ['react-html-attrs', 'transform-class-properties', 'transform-decorators-legacy'],
        }
      }
    ]
  },
  output: {
    path: __dirname + "/src/",
    filename: "client.min.js"
  },
  plugins: debug ? [] : [
    new webpack.optimize.DedupePlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new webpack.optimize.UglifyJsPlugin({ mangle: false, sourcemap: false }),
  ],
};

./src/js/client.js

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

import Bootstrap from 'bootstrap-without-jquery';

import Layout from "./pages/Layout";

const app = document.getElementById('app');

ReactDOM.render(<div>/Hello</div>, app);

文件结构与教程源代码相匹配，所以我不认为这是一个问题。但是，当我运行npm run dev时，我会得到以下错误

Webpack误差

如果我评论掉client.js的第10行，webpack就会毫无问题地编译。(ReactDOM.render函数)

Answer 1

您已经安装了Webpack 1，它有config.module.loaders，但是您的配置使用config.module.rules，这是Webpack 2中介绍的。

安装Webpack 4应该可以解决您的问题。

npm install -D webpack@latest