Question

我现在正在研究一个虚拟项目，以使用react和react路由器学习express和webpack，我想将我所有的服务器请求重定向到index.html，这样在访问其他内容时不会出现“无法获取”错误网址。现在，我处于开发模式，问题是我正在使用HtmlWebpackPlugin提供生成的HTML。我尝试了这段代码，但是访问除根目录以外的任何URL时，我得到的都是“ ENOENT”错误。

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解决这个问题？

P.S。也有人可以解释为什么访问根URL时服务器正常加载生成的index.html。我以为上面的代码段拦截了所有请求。现在真的很困惑

这是我的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

webpack-dev-middleware未生成任何文件。
这意味着不会生成index.html。

根据its documentation：

没有文件写入磁盘，而是处理内存中的文件

请删除：

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

要以开发模式处理Webpack文件：

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

app.get('*', (req, res) => { res.sendFile(path.join(__dirname, '../build/index.html') ...可以在生产Webpack构建后使用。

Answer 2

您可以使用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 3

如果仍然有人遇到此问题，就像我一样，您通常将 express 与 webpack-dev-middleware 和 react-router 一起使用

在使用软件包的最新更新时，我找到了解决方案。

您可以在webpack-dev-middleware文档中注意到，writeToDisk选项默认设置为 false 。只需将其设置为 true ，同时仍然发送构建文件夹中的index.html文件即可。

对于那些需要代理才能在localhost：80上使用REST api的人，这是我想出的服务器脚本：

import express from 'express';
import webpack from 'webpack';
import webpackDevMiddleware from 'webpack-dev-middleware';
import webpackHotMiddleware from 'webpack-hot-middleware';
import webpackConfig from '../webpack.config';
import proxy from 'express-http-proxy';

global.watch = true;

const compiler = webpack(webpackConfig);
const app = express();
const getPath = req => require('url').parse(req.url).path;
const createProxy = ({ hostname = 'localhost', path = '' }) => proxy(hostname, { proxyReqPathResolver: req => `${path}${getPath(req)}` });

export default async () => {

  // Webpack dev Server
  app.use(webpackDevMiddleware(compiler, {
    writeToDisk: true,
    noInfo: true,
    stats: webpackConfig.stats,
    publicPath: webpackConfig.output.publicPath
  }))

  // Hot module replacement
  .use(webpackHotMiddleware(compiler))

  // Proxy
  .use('/api', createProxy({ path: '/api' }))
  .use('/auth', createProxy({ path: '/auth' }))

  // Static path
  .use(express.static(webpackConfig.output.path))

  // Handles routes
  .get('/*', (req, res) =>{
    res.sendFile(webpackConfig.output.path + '/index.html');
  })

  // Start
  .listen(3000, (err) => {
    if (err) {
      console.error(err);
    } else {
      console.info('Listening to http://localhost:3000');
    }
  });
};

我正在使用babel-node运行脚本，因此如果使用node，请使用 require 而不是 import 。

Express.js服务生成index.html问题

3 个答案: