webpack-dev-server，historyApiFallback不工作(webpack-4，反应路由器-4)

Question

我正在用webpack4测试react-router4，但是拿不到webpack-dev-server的设置：

{historyApiFallback: true}

去工作。这种用法在webpack3中工作得很好，所以我不确定出了什么问题……这是我的webpack.config.js：

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

module.exports = () => {
  return {
    mode: 'development',
    devtool: 'source-map',
    devServer: {
      port: 8888,
      historyApiFallback: true,
      stats: 'minimal'
    },
    resolve: {
      extensions: ['*', '.mjs', '.js', '.jsx']
    },
    module: {
      rules: [
        {
          test: /\.m?jsx?$/,
          exclude: /(node_modules)/,
          use: {
            loader: 'babel-loader'
          }
        }
      ]
    },
    plugins: [
      new HtmlWebpackPlugin({
        title:'React Lab',
        template: 'src/index.html'
      })
    ]
  }
}

下面是我用react -router4编写的简单react应用程序：

import React from 'react';
import ReactDOM  from 'react-dom';
import {
  BrowserRouter as Router,
  Route,
  Link,
  Switch
} from 'react-router-dom';

const mountNode = document.getElementById('app');

const App = () => (
  <Router>
    <div>

      <ul>
        <li><Link to="/">Link to: /</Link></li>
        <li><Link to="/page1">Link to: /page1</Link></li>
        <li><Link to="/page2">Link to: /page2</Link></li>
        <li><Link to="/does/not/exist">Link to: /does/not/exist</Link></li>
      </ul>
      <button onClick={()=>{location.reload();}}>reload page</button>

      <Switch>
        <Route exact path="/"      component={()=>(<h2>home</h2>)} />
        <Route exact path="/page1" component={()=>(<h2>page1</h2>)} />
        <Route exact path="/page2" component={()=>(<h2>page2</h2>)} />
        <Route                     component={()=>(<h2>no match</h2>)} />
      </Switch>

      <Route path="/" component={(props) =><div>{`props.location.pathname: ${props.location.pathname}`}</div>} />

    </div>
  </Router>
);

ReactDOM.render( <App/>, mountNode

导航到以下位置后：

<Link to="/does/not/exist" /> 

然后单击

<button>reload page</button>

webpack开发服务器重定向至main.js失败

以下是github：https://github.com/ApolloTang/webpack-dev-server-history-api-fall-back-not-working上的完整代码。

任何帮助或意见都将不胜感激。

Answer 1

事实证明，我在webpack.config.js中缺少output.publicPath：

output: {
  //  must specified output.publicPath otherwise
  //  devServer.historyApiFallback will not work
  publicPath: '/'
},

使用如上指定的output.publicPath，historyApiFallback可以工作。

我不记得我在哪里读到过在WebPack4的配置中说output.publicPath是一个可选的，但它确实需要与webpack-dev-server一起工作。

https://webpack.js.org/configuration/output/#output-publicpath的文档中写道：

服务器webpack-dev-

也接受了publicPath的提示，使用它来确定从哪里提供输出文件。

但我不明白这和hisitoryApiFallback有什么关系。

Answer 2

似乎您的output.publicPath必须与devServer.historyApiFallback.index匹配。

我想知道为什么不自动暗示这一点，除非另有说明，否则DevServer会以同样的方式重用output.publicPath。