Javascript ReactDOM.render（）不工作-您可能需要适当的加载程序来处理此文件类型

我一直在Udemy.com上学习课程，遇到了一个无法解决的问题。我已经安装了webpack和babel，并按照说明进行了第二次检查，以确保我没有犯错误

尝试在my index.js中运行此代码时：

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

ReactDOM.render(
  <div>HELLO!</div>, document.getElementById('root')
);

这是我的webpack.config.js：

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

module.exports = {
  entry: ['./app/index.js'],
  output: {
    path: __dirname + '.build',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        module: {
          loaders: [
            {
              loader: 'babel-loader',
              test: /\.jsx?$/,
              exclude: /node_modules/,
              query: {
                presets: ['es2015', 'react']
              }
            }
          ]
        }
      }
    })
  ],
  devServer: {
    port: 3000,
    contentBase: './build',
    inline: true
  }
}

---

检查应用程序中已呈现应用程序的位置。 检查您的html文件。你返回的代码很好

请走到教程点

---

您的网页包配置错误。您收到的错误是关于，由于配置错误而无法解析

另外，既然您正在创建一个新项目，为什么要使用一个用于从Webpack1.x版本迁移到2.x版本的应用程序

如果使用webpack版本2.x，请修改

模块。导出
以包含：

module: {
    rules: [
        {
            test: /\.(js)$/,
            use:[{
                    loader: 'babel-loader',
                    query: {
                        compact: false,
                        presets: [["es2015", {"modules": false, "loose" : true}], 'react']

                    }
                }]
        }
    ]
}

为什么你所有的配置都被塞进了
LoaderOptionsPlugin
？只需使用普通的网页配置。
const path = require('path');
const webpack = require('webpack');

module.exports = {
  entry: ['./app/index.js'],
  output: {
    path: __dirname + '.build',
    filename: 'bundle.js'
  },
  plugins: [
    new webpack.LoaderOptionsPlugin({
      options: {
        module: {
          loaders: [
            {
              loader: 'babel-loader',
              test: /\.jsx?$/,
              exclude: /node_modules/,
              query: {
                presets: ['es2015', 'react']
              }
            }
          ]
        }
      }
    })
  ],
  devServer: {
    port: 3000,
    contentBase: './build',
    inline: true
  }
}

module: {
    rules: [
        {
            test: /\.(js)$/,
            use:[{
                    loader: 'babel-loader',
                    query: {
                        compact: false,
                        presets: [["es2015", {"modules": false, "loose" : true}], 'react']

                    }
                }]
        }
    ]
}