Javascript React-Redux项目：React元素未呈现，仅呈现父目录

所以，幸运的是，我能够让我的网页构建工作没有错误。但是，每当我运行“npm start”（webpack dev server）时，它都会呈现/服务于此文件的父目录。我不太清楚为什么会这样

-我创建了一个server.js文件，当我转到主路由“/”时，它应该为它提供index.html文件。 -我确保webpack.config.js文件中的条目是正确的，事实似乎就是这样。我把我的文件结构也包括在下面作为参考

客户端/App.JSX

import React, { Component } from 'react';
import Wrapper from './Containers/MainContainer.jsx';

class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return(
        <div id = "app">
            <Wrapper/>
        </div>
        )
    }
}

export default App;

客户端/Index.js

/* eslint no-unused-vars: 0 */
const path = require('path');
const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());
// app.use(express.static(path.resolve(__dirname, '../client/index.html')));

app.get('/', (req, res) => {
    res.status(200).sendFile((path.resolve(__dirname, '../client/index.html'));
});

app.listen(port, () => console.log(`Listening on port ${port}`));

import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import App from './App.jsx';
import store from './store.js';
// import styles from './index.css'
// import './index.css';

render(
    <Provider store = {store}>
        <App/>
    </Provider>,
    document.getElementById('app')
);

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    //start at entry
    entry: './client/index.js',
    // devtool: "eval-source-map",
    mode: process.env.NODE_ENV,
    //Run these rules on it & go through the loaders
    module: {
        rules: [
            { test: /\.svg$/, use: 'svg-inline-loader' },
            { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
            { test: /\.jsx?$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env', '@babel/preset-react'],
                        // plugins: ['@babel/plugin-proposal-object-rest-spread']
                    }
                }
            },
        ]
    }, 
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
        resolve: {
        extensions: ['.js', '.jsx'],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'client/index.html'
        })
    ],  
    devServer: {
        publicPath: "/build/",
        proxy: {
            'api':'http://localhost:3000',
        },
    },  
    resolve: {
        extensions: ['.js', '.jsx'],
    },
}

包的开始部分.json

{
  "name": "gift-test",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "cross-env NODE_ENV=production webpack-dev-server --open",
    "build": "cross-env NODE_ENV=production webpack",
    "dev": "cross-env NODE_ENV=development concurrently \"nodemon server/server.js\" \"webpack-dev-server --open\" "
  },
  "babel": {
    "presets": [
      "@babel/preset-env",
      "@babel/preset-react"
    ]
  }

一般文件结构

Client
  -Actions
    -actions.js
  -Components
    -component1
    -component2
    -component3
  -Constants
    -actionTypes.js
  -Containers
    -Container1
    -Container2
  -Reducers
    -Reducers (Reducer Logic)
    -Index.js(Combined Reducers)
  
  -App.jsx
  -index.html
  -index.css
  -index.js (Provider & imported store).
  -store.js

-Server
  -server.js
  -models
    -model1
  

---

是因为在

Server/Server.js

中您更改为父目录

'../client/index.html'

？

是因为在

Server/Server.js

中您更改为父目录

'../client/index.html'

？

网页包将我们的应用程序输出到

dist

文件夹中（与

客户端的级别相同）。您需要更改
server.reder
以提供
。/dist/index.html
。另外，您的
client/client.html
被用作网页包的模板，因此不需要其中的脚本标记。Wp将自动将脚本标记写入我尝试的server.js文件上的输出文件：``res.status（200）.sendFile（（path.resolve（_udirname，../dist/index.html））；```````但还是没有运气。当我执行localhost:8080/client时，它可以工作，但当我输入localhost 8080Webpack将我们的应用程序输出到
dist
文件夹（与
client
的级别相同）时，它不会呈现。您需要更改
server.reder
以提供
。/dist/index.html
。另外，您的
client/client.html
被用作网页包的模板，因此不需要其中的脚本标记。Wp将自动将脚本标记写入我尝试的server.js文件上的输出文件：``res.status（200）.sendFile（（path.resolve（_udirname，../dist/index.html））；```````但还是没有运气。当我执行localhost:8080/client时，它会工作，但当我输入localhost 8080时，它不会呈现
Client
  -Actions
    -actions.js
  -Components
    -component1
    -component2
    -component3
  -Constants
    -actionTypes.js
  -Containers
    -Container1
    -Container2
  -Reducers
    -Reducers (Reducer Logic)
    -Index.js(Combined Reducers)
  
  -App.jsx
  -index.html
  -index.css
  -index.js (Provider & imported store).
  -store.js

-Server
  -server.js
  -models
    -model1