React + Webpack 我在做什么错答案

【问题标题】：React + Webpack What am I doing WrongReact + Webpack 我在做什么错
【发布时间】：2018-05-30 16:56:06
【问题描述】：

我正在尝试获得一个非常简单的 react + webpack shell。

一切似乎都在正确捆绑和编译，但是当我运行应用程序时，没有呈现任何反应。

我的 webpack 配置...

  module.exports = {
entry: [
  './src/index.js'
],
module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use:
            {
                loader: 'babel-loader',
                query: {presets: ['react', 'es2015']}
            }
      }
    ]
  },
  resolve: {
    extensions: ['*', '.js', '.jsx']
  },
output: {
  path: __dirname + '/dist',
  publicPath: '/',
  filename: 'bundle.js'
},
devServer: {
    contentBase: "./src",
    hot: true,
    port: 3000,
    historyApiFallback: true
} };

索引.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>React App Setup</title>
</head>
<body>
    <div id='root'></div>
    <script type="text/javascript" src="bundle.js"></script>
</body>
</html>

还有 Index.js

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './components/App.jsx';

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

如果需要，还有 App.js

import React from 'react';

export default class App extends React.Component {
  render() {
      console.log("made it here");
    return (
     <div style={{textAlign: 'center'}}>
        <h1>Hello World</h1>
      </div>);
  }
}

我可能使用了某种类型的加载器错误，但是如果它没有加载，为什么我会在 bundle.js 中看到“Hello Word”和我的控制台日志语句？？？

【问题讨论】：

看到下面的评论 - 如果你正在寻找轻量级的东西，你应该看看 Parcel
哦实际上你可能需要脚本标签之前 html节点
尝试将<script type="text/javascript" src="bundle.js"></script>移动到html文档的<head>部分
感谢那是关键，而不是头部，我在身体之后移动。

标签： javascript reactjs webpack

【解决方案1】：

这里的答案...在正文之后加载捆绑包。 :)

【讨论】：

【解决方案2】：

我无法从您提供的内容中看出您做错了什么，但我强烈建议您通过 npm 安装和使用 create-react-app：https://www.npmjs.com/package/create-react-app

为此，您可以在命令提示符/CLI 中输入以下内容：

npm install -g create-react-app
create-react-app my-app
cd my-app
npm start

我已经将它用于我做过的每个项目，并且在几秒钟内就可以轻松获得“hello world”。这将为您提供一个 hello-world 应用程序，该应用程序在您的默认 localhost 目录 \my-app 中运行

【讨论】：

我不想要随之而来的沉重负担。真的没那么好。
虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接答案可能会失效。 - From Review
感谢@Davіd 的指导 - 我已做出相应调整。