将Webpack开发服务器用于单页应用历史记录ApiFallback，而不使用默认的index.html文件

Question

最近，由于某些与Firebase托管相关的问题，我不得不将index.html文件重命名为app.html。

在此之前，我的 webpack开发服务器工作正常，并使用index.html文件进行了以下配置：

webpack.config.js

// SOME OTHER CONFIGS

entry: {
    app: './src/index.js'
  },

  plugins: [
    new CleanWebpackPlugin(),
    new WebPackManifestPlugin(),
    new HtmlWebpackPlugin({
      //title: 'Todo App',
      favicon: 'src/assets/Favicon.ico',
      template: './src/index.html',
    }),
    new Dotenv()
  ],

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true,
  },

但是在将index.html更改为app.html之后，我不得不更新一些配置以指向新文件。

webpack.config.js

// SOME OTHER CONFIGS

entry: {
    app: './src/index.js'
  },

  plugins: [
    new CleanWebpackPlugin(),
    new WebPackManifestPlugin(),
    new HtmlWebpackPlugin({
      //title: 'Todo App',
      favicon: 'src/assets/Favicon.ico',
      template: './src/app.html',                // <-------------- ADDED THIS
      filename: 'app.html'                       // <-------------- ADDED THIS
    }),
    new Dotenv()
  ],

  devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    historyApiFallback: true,
    index: 'app.html'                            // <-------------- ADDED THIS
  },

---

问题

现在发生的是我的 dev服务器仅接受本地路由'/'。对于其他所有特定路由，它都以404响应。

https://webpack.js.org/configuration/dev-server/#devserverhistoryapifallback 我想这就是原因：

---

问题

我该如何解决？我是否需要重写以将所有路由都指向我的app.html文件，还是有一个更简单的解决方案？

如果我需要重写，如何写其中之一？我没有得到/^\/$/属性的from语法。如何编写/**通配符路由？

Answer 1

发件人：https://github.com/bripkens/connect-history-api-fallback

只需找出丢失的内容：

devServer: {
    contentBase: './public',
    compress: true,
    hot: true,
    // historyApiFallback: true,
    historyApiFallback: {
      index: '/app.html'                  // <----- THIS WORKS
    },
    index: 'app.html'
    // headers: {
    //   "Access-Control-Allow-Origin": "*",
    //   "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
    //   "Access-Control-Allow-Headers": "X-Requested-With, content-type, Authorization"
    // }
  },

现在一切正常。