使用Reactjs和bash命令构建后，本地主机网页为空：npm start

Question

I am a newbie to ReactJs and trying to build a webpage without using create-react-app. 我是ReactJs的新手，并尝试在不使用create-react-app的情况下构建网页。 This is a project from a coding course and I managed to build to production file using webpack. 这是一个编码课程中的项目，我设法使用webpack生成了生产文件。 However, the localhost webpage is still empty. 但是，本地主机网页仍然为空。 Also, i keep getting an error from using %PUBLIC_URL% I know this isn't the way to ask a question but I am very new to all of this and i don't even know where the problem lies. 另外，我使用％PUBLIC_URL％会不断出错，我知道这不是问问题的方法，但是我对所有这些都非常陌生，甚至不知道问题出在哪里。 thanks for ur help :) 感谢您的帮助:)

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


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

//index.html

    <!doctype html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <meta name="theme-color" content="#000000">
        <!-- CSS Reset -->
        <link href="./reset.css" rel="stylesheet" type="text/css">
        <!-- Google Fonts -->
        <link href="https://fonts.googleapis.com/css?family=Work+Sans:300,500,600" rel="stylesheet">
        <link href="https://fonts.googleapis.com/css?family=Poppins:600" rel="stylesheet">

        <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
        <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">


        <title>ravenous</title>
      </head>
      <body>
        <noscript>
          You need to enable JavaScript to run this app.
        </noscript>
        <div id="root"></div>

      <script type="text/javascript" src="./App.bundle.js"></script></body>
      <script src="../src/index.js"></script>
    </html>

//webpack.configuration

    module.exports = {
        entry: {
            app: './src/index.js'
        },
        output: {
            path: path.resolve(__dirname, 'dist'),
            filename: 'App.bundle.js'
        },
        module: {
            rules: [{
                    test: /\.js?$/,
                    exclude: /node_modules/,
                    use: [{
                        loader: 'babel-loader',
                        options: { presets: ['@babel/preset-env'] }
                }]
            },

            {
                test: /\.css?$/,
                use: [{ loader: ['style-loader', 'css-loader']}]
            }
        ]
        },
        plugins : [
            new HtmlWebpackPlugin(
                {
                    template:'./public/index.html',
                }
            )
        ]

    }

//package.json

    {
      "name": "ravenous",
      "version": "1.0.0",
      "description": "",
      "main": "./src/index.js",
      "scripts": {
        "start": "webpack-dev-server --mode development --open --hot",
        "build": "webpack --mode production"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^16.8.6",
        "react-dom": "^16.8.6"
      },
      "devDependencies": {
        "@babel/core": "^7.5.5",
        "@babel/preset-env": "^7.5.5",
        "@babel/preset-react": "^7.0.0",
        "babel-loader": "^8.0.6",
        "html-webpack-plugin": "^3.2.0",
        "webpack": "^4.36.1",
        "webpack-cli": "^3.3.6",
        "webpack-dev-server": "^3.7.2"
      }
    }

When I ran $ npm start , the webpage was empty. 当我运行$ npm start ，网页为空。 There was also an 400 Bad Request error with <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> and <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> . 还有一个400错误的请求错误，其中包含<link rel="manifest" href="%PUBLIC_URL%/manifest.json">和<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> 。

Answer 1

您确定此路径正确吗？

import App from './components/App/App';

使用Reactjs和bash命令构建后，本地主机网页为空：npm start

问题描述

1 个解决方案

解决方案1
0 2019-07-22 19:39:28

使用Reactjs和bash命令构建后，本地主机网页为空：npm start

问题描述

1 个解决方案

解决方案1 0 2019-07-22 19:39:28

解决方案1
0 2019-07-22 19:39:28