reactjs - reactjs 应用程序 - 无法显示我的 hello world

问题描述

背景/问题

我正在尝试构建了解我的第一个 react/webpack/nodejs 应用程序。我可以通过打开浏览器并导航到 http://localhost:3333/ 来构建/启动它，但是我期望的 hello world 消息没有显示。相反，我认为它试图给我一个文件夹的目录列表......？不太确定，但我看到的只是“~/”

npm 运行开发结果

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ npm run dev

> reactjstutorial@1.0.0 dev /mnt/c/Users/me/source/repos/reactjstutorial
> webpack-dev-server

ℹ ｢wds｣: Project is running at http://localhost:3333/
ℹ ｢wds｣: webpack output is served from /
ℹ ｢wds｣: Content not from webpack is served from /mnt/c/Users/me/source/repos/reactjstutorial/build
ℹ ｢wdm｣: Hash: e855fbe9a7da7f9b8f40
Version: webpack 4.43.0
Time: 1854ms
Built at: 06/28/2020 8:37:19 PM
        Asset      Size  Chunks                   Chunk Names
    bundle.js  1.26 MiB    main  [emitted]        main
bundle.js.map  1.46 MiB    main  [emitted] [dev]  main
Entrypoint main = bundle.js bundle.js.map
[0] multi (webpack)-dev-server/client?http://localhost:3333 ./app/index.jsx 40 bytes {main} [built]
[./app/index.jsx] 3.47 KiB {main} [built]
[./node_modules/ansi-html/index.js] 4.16 KiB {main} [built]
[./node_modules/ansi-regex/index.js] 135 bytes {main} [built]
[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]
[./node_modules/react/index.js] 190 bytes {main} [built]
[./node_modules/strip-ansi/index.js] 161 bytes {main} [built]
[./node_modules/webpack-dev-server/client/index.js?http://localhost:3333] (webpack)-dev-server/client?http://localhost:3333 4.29 KiB {main} [built]
[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.51 KiB {main} [built]
[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.53 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/createSocketUrl.js] (webpack)-dev-server/client/utils/createSocketUrl.js 2.91 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/log.js] (webpack)-dev-server/client/utils/log.js 964 bytes {main} [built]
[./node_modules/webpack-dev-server/client/utils/reloadApp.js] (webpack)-dev-server/client/utils/reloadApp.js 1.59 KiB {main} [built]
[./node_modules/webpack-dev-server/client/utils/sendMessage.js] (webpack)-dev-server/client/utils/sendMessage.js 402 bytes {main} [built]
[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]
    + 29 hidden modules
ℹ ｢wdm｣: Compiled successfully.

webpack.config.js

var webpack = require('webpack')
var path = require('path')

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = {
        entry: APP_DIR + '/index.jsx',
        mode: 'development',
        output: {
                path: BUILD_DIR,
                filename: 'bundle.js',
                publicPath: '/'
        },
        devtool: 'source-map',
        devServer: {
                inline: true,
                contentBase: BUILD_DIR,
                port: 3333
        },

        module: {
                rules: [
                        {
                                test: /\.jsx?/,
                                include: APP_DIR,
                                loader: 'babel-loader'
                        }
                ]
        }
}
module.exports = config

app/index.jsx 的内容：

import React from 'react'
import {render} from 'react-dom'
import ReactDOM from 'react-dom'

class App extends React.Component {
   render(){
      return (
        <p>Hello world!</p>
      );
   }
}

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

package.json 的内容

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ cat package.json
{
  "name": "reactjstutorial",
  "version": "1.0.0",
  "description": "checking out babel",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.10.3",
    "@babel/preset-env": "^7.10.3",
    "@babel/preset-react": "^7.10.1",
    "babel-loader": "^8.1.0",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "webpack": "^4.43.0",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  },
  "dependencies": {}
}

其他问题

我期待在 build 文件夹中看到一个捆绑的 js 文件，但它目前是空的有人可以解释我做错了什么吗？谢谢。

编辑 1

谢谢你们的回应。FWIW ...我想手动尝试，所以我实际上首先了解引擎盖下发生的事情。最终，我不得不接管其他人编写的大型 react/nodejs 应用程序，而不是构建自己的应用程序。所以这就是为什么如果可能的话，我想知道一切是如何结合在一起的。说了这么多，我两个都做。我将创建 html 文件并尝试使用。然后我会采纳你的建议并尝试使用 create react app 工具

谢谢。

编辑 2

这是我的 index.html 所在的位置 .. 以及它的样子：

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ cat public/index.html
<!DOCTYPE html>
<html lang="en">
<head>
        <meta charset="UTF-8">
        <title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$

这是 webpack 现在的配置。请注意，第一行现在添加了对 html-webpack-plugin... 的要求，然后在末尾添加了相应的插件部分。

me@DESKTOP-123:/mnt/c/Users/me/source/repos/reactjstutorial$ cat webpack.config.js
const HtmlWebPackPlugin = require('html-webpack-plugin');

var webpack = require('webpack')
var path = require('path')

var BUILD_DIR = path.resolve(__dirname + '/build')
var APP_DIR = path.resolve(__dirname + '/app')

var config = {
        entry: APP_DIR + '/index.jsx',
        mode: 'development',
        output: {
                path: BUILD_DIR,
                filename: 'bundle.js',
                publicPath: '/'
        },
        devtool: 'source-map',
        devServer: {
                inline: true,
                contentBase: BUILD_DIR,
                port: 3333
        },
        module: {
                rules: [
                        {
                                test: /\.jsx?/,
                                include: APP_DIR,
                                loader: 'babel-loader'
                        }
                ]
        },
        plugins: [
                new HtmlWebPackPlugin({
                        template: path.resolve(__dirname, 'public/index.html'),
                        filename: 'index.html'
                })
        ]
}
module.exports = config

标签： reactjsnpmwebpack

reactjs - reactjs 应用程序 - 无法显示我的 hello world

问题描述

解决方案

推荐阅读