使用React-Router browserHistory，Wepback 2 historyApiFallback和節點

Question

我試圖使用React，Node，Wepback 2在本地運行我的React應用程序。每當我點擊一條不是/的路線時，我的目標是404。能夠運行我的節點服務器，讓webpack-dev-server運行，使用browserHistory並返回我的webpack的historyApiFallback工作。

目前做哪些工作：

1. 如果我只是運行webpack-dev-server並沒有節點服務器然後browserHistory工作正常，沒有404。
2. 如果我用hashHistory運行節點，它工作正常，沒有404s。

因此，排除我的路線不工作。下面是一些代碼：

server.js

const express = require('express'); 
const expressGraphQL = require('express-graphql'); 
const schema = require('./schema'); 

const app = express(); 

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.listen(process.env.PORT || 5000,() => console.log('Listening')); 

---

webpack.config.js

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

const VENDOR_LIBS = [ 
    'axios', 'react', 'react-dom', 'react-router', 'react-apollo', 'prop-types' 
]; 

module.exports = { 
    entry: { 
    bundle: './client/src/index.js', 
    vendor: VENDOR_LIBS 
    }, 
    output: { 
    path: path.join(__dirname, 'dist'), 
    publicPath: '/', 
    filename: '[name].[chunkhash].js' 
    }, 
    module: { 
    rules: [ 
     { 
     use: 'babel-loader', 
     test: /\.js$/, 
     exclude: /node_modules/ 
     }, 
     { 
     test: /\.scss$/, 
      use: [{ 
       loader: "style-loader" 
      }, { 
       loader: "css-loader" 
      }, { 
       loader: "sass-loader" 
      }] 
     }, 
     { 
     test: /\.(jpe?g|png|gif|svg|)$/, 
     use: [ 
      { 
      loader: 'url-loader', 
      options: {limit: 40000} 
      }, 
      'image-webpack-loader' 
     ] 
     } 
    ] 
    }, 
    plugins: [ 
    new webpack.optimize.CommonsChunkPlugin({ 
     names: ['vendor', 'manifest'] 
    }), 
    new webpack.DefinePlugin({ 
     'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) 
    }), 
    new HtmlWebpackPlugin({ 
     template: './client/src/index.html' 
    }) 
    ], 
    devServer: { 
    historyApiFallback: true 
    } 
}; 

---

routes.js

import React from 'react'; 
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

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

const componentRoutes = { 
    component: App, 
    path: '/', 
    indexRoute: { component: Portal }, 
    childRoutes: [ 
    { 
     path: 'home', 
     getComponent(location, cb) { 
     System.import('./components/homepage/Home') 
      .then(module => cb(null, module.default)); 
     } 
    } 
    ] 
}; 

const Routes =() => { 
    return <Router history={ browserHistory } routes={ componentRoutes } /> 
}; 

export default Routes; 

同樣，目標是能夠在本地啓動我的節點服務器，使用browserHistory而不是404s。我不想使用hashHistory，我需要使用我的節點服務器，所以我可以使用graphql。我也不想回到webpack v1。雖然這裏是一個鏈接到人們得到它在第一版的工作：

historyApiFallback doesn't work in Webpack dev server

Answer 1

的historyApiFallback選項是專門爲webpack-dev-server。如果您正在運行自己的服務器，即使使用webpack-dev-middleware，也需要將其配置爲在出現404時發送index.html。因爲您正在使用html-webpack-plugin，您要發送的index.html在您的文件系統上不存在，但僅在內存中存在。要使其工作，您可以訪問webpack編譯器的輸出，如comment of html-webpack-plugin #145中所示。

server.js

const path = require('path'); 
const express = require('express'); 
const expressGraphQL = require('express-graphql'); 
const schema = require('./schema'); 

const app = express(); 

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

const webpackMiddleware = require('webpack-dev-middleware'); 
const webpack = require('webpack'); 
const webpackConfig = require('../webpack.config.js'); 
const compiler = webpack(webpackConfig); 

app.use(webpackMiddleware(compiler)); 
// Fallback when no previous route was matched 
app.use('*', (req, res, next) => { 
    const filename = path.resolve(compiler.outputPath, 'index.html'); 
    compiler.outputFileSystem.readFile(filename, (err, result) => { 
    if (err) { 
     return next(err); 
    } 
    res.set('content-type','text/html'); 
    res.send(result); 
    res.end(); 
    }); 
}); 

app.listen(process.env.PORT || 5000,() => console.log('Listening'));