Webpack Web包开发服务器，historyApiFallback不工作（Web包4，react-router-4）

我正在用webpack4测试react-router4，但无法获取webpack dev服务器的设置：

{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'
      })
    ]
  }
}

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

下面是我使用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

从“React”导入React；
从“react dom”导入react dom；
进口{
BrowserRouter作为路由器，
路线,，
链接
转换
}从“反应路由器dom”；
const mountNode=document.getElementById（'app'）；
常量应用=（）=>(

链接到：/
链接至：/page1
链接至：/page2
链接到：/不存在/不存在

{location.reload（）；}}>重新加载页面
（主页）}/>
（第1页）}/>
（第2页）}/>
（不匹配）}/>
{`props.location.pathname:${props.location.pathname}`}/>
);
ReactDOM.render（

任何帮助或评论都将不胜感激。
我发现webpack.config.js中缺少output.publicPath:

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'
      })
    ]
  }
}

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

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

我不记得在哪里读到过上面提到的output.publicPath在webpack4的配置中是可选的，但使用WebpackDev服务器时确实需要它

会议上的文件说：

webpack dev服务器还从publicPath获取一个提示，使用它来
确定从何处提供输出文件

但我不明白这与HisitoryApi Fallback有什么关系。
似乎您的
输出。publicPath
必须匹配

我想知道为什么这不是自动暗示的，除非另有规定，否则DevServer会以相同的方式重用
output.publicPath