Express.js обслуживает созданную проблему index.html

Question

Сейчас я работаю над фиктивным проектом по изучению express и webpack с маршрутизатором реагировать и реагировать. Я хочу перенаправить все запросы сервера на index.html, чтобы при доступе к другим сообщениям не возникало ошибок «Cannot GET».URL-адрес.Сейчас я нахожусь в режиме разработки, и проблема в том, что я обслуживаю сгенерированный HTML с помощью HtmlWebpackPlugin.Я попробовал этот код, но все, что я получаю, это «ENOENT» ошибки при доступе к любому URL, кроме корневого.

app.get('*', (req, res) => {
res.sendFile(path.join(__dirname, '../build/index.html'), function(err) {
       if (err) {
           res.status(500).send(err);
       }
   });
});

Вот также мой webpack.config:

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

module.exports = {
    entry: './client/index.js',
    output: {
        path: path.join(__dirname, 'build'),
        publicPath: '/',
        filename: 'bundle.js',
    },
    module: {
        rules: [
            {
                use: 'babel-loader',
                test: /\.js$/,
                exclude: /node_modules/,
            },
            {
                use: ['style-loader', 'css-loader'],
                test: /\.css$/,
            },
        ],
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: 'client/index.html',
            fileName: path.join(__dirname, 'build/index.html'),
        }),
    ],
};

ЭтоМожно решить эту проблему с помощью Express?

PS Также может кто-то объяснить, почему сервер загружает сгенерированный index.html нормально при доступе к корневому URL.Я думал, что я перехватываю все мои запросы с фрагментом кода выше.Действительно запутанный прямо сейчас

Вот мой файл server.js:

const express = require('express');
const models = require('./models');
const expressGraphQL = require('express-graphql');
const mongoose = require('mongoose');
const bodyParser = require('body-parser');
const schema = require('./schema/schema');
const path = require('path');

const app = express();    
const MONGO_URI = 'some_uri';    
mongoose.Promise = global.Promise;
mongoose.connect(MONGO_URI);
mongoose.connection
    .once('open', () => console.log('Connected to MongoLab instance.'))
    .on('error', error => console.log('Error connecting to MongoLab:', 
error));

app.use(bodyParser.json());
app.use(
    '/graphql',
    expressGraphQL({
        schema,
        graphiql: true,
    })
);

const webpackMiddleware = require('webpack-dev-middleware');
const webpack = require('webpack');
const webpackConfig = require('../webpack.config.js');
app.use(webpackMiddleware(webpack(webpackConfig)));
app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname, '../build/index.html'), 
        function(err) {
            if (err) {
                res.status(500).send(err);
            } 
        });

Вот package.json, я использую старые версии некоторых пакетов, потому что я следую руководству, планирую обновить иххотя позже:

{
  "name": "graphql-learning-project-02",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js --ignore client"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "apollo-client": "^0.8.1",
    "axios": "^0.15.3",
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-preset-env": "^1.1.8",
    "babel-preset-react": "^6.22.0",
    "body-parser": "^1.16.0",
    "connect-mongo": "^1.3.2",
    "css-loader": "^0.26.1",
    "express": "^4.14.0",
    "express-graphql": "^0.6.1",
    "express-session": "^1.15.0",
    "graphql": "^0.8.2",
    "html-webpack-plugin": "^2.26.0",
    "lodash": "^4.17.4",
    "mongoose": "^4.7.8",
    "nodemon": "*",
    "passport": "^0.3.2",
    "passport-local": "^1.0.0",
    "react": "15.4.2",
    "react-apollo": "^0.9.0",
    "react-dom": "15.4.2",
    "react-router": "^3.0.2",
    "react-router-dom": "^4.3.1",
    "style-loader": "^0.13.1",
    "webpack": "^2.2.0",
    "webpack-dev-middleware": "^1.9.0"
  }
}

Answer 1

Вы можете использовать промежуточное программное обеспечение connect-history-api-fallback , чтобы всегда выполнять откат к index.html.Это можно использовать как в среде разработки, так и в среде разработки.

Используйте это так:

const connectHistoryApiFallback = require('connect-history-api-fallback');

...

app.use(connectHistoryApiFallback({
  verbose: false
}));

// static files and folders must be set after connectHistoryApiFallback
app.use("/", express.static(__dirname));

app.listen(app.get('port'), (err) => {
  console.info('Node app is running on port', app.get('port'));
});

Answer 2

webpack-dev-middleware не генерирует никаких файлов.
Это означает, что index.html не генерируется.

Согласно его документации :

Файлы не записываются на диск, а обрабатываются файлы в памяти

Удалите:

app.get('*', (req, res) => { ...

Для файлов веб-сервера на сервере в режиме разработки:

app.use('*', webpackMiddleware(webpack(webpackConfig)))

app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../build/index.html') ... можно использовать после сборки производственного веб-пакета.