React + Webpack我在做什么错

Question

我正在尝试获得一个非常简单的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
} };

Index.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”和控制台日志语句？

Answer 1

答案就在这里。 :)

Answer 2

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

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

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

我已经将它用于我做过的每个项目，并且在数秒之内获得“ hello world”就没有问题。 这将为您提供一个Hello World应用程序，该应用程序在目录\\my-app默认本地主机上运行

React + Webpack我在做什么错

问题描述

2 个解决方案

解决方案1
0 已采纳 2018-05-30 17:31:34

解决方案2
-1 2018-05-30 17:08:24

React + Webpack我在做什么错

问题描述

2 个解决方案

解决方案1 0 已采纳 2018-05-30 17:31:34

解决方案2 -1 2018-05-30 17:08:24

解决方案1
0 已采纳 2018-05-30 17:31:34

解决方案2
-1 2018-05-30 17:08:24