Javascript 在不使用默认index.html文件的情况下，将webpack dev server用于单页应用程序历史API回退

最近我不得不将我的

index.html

文件重命名为

app.html

，因为一些Firebase托管相关问题

在此之前，我的webpack dev server工作正常，使用

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,
  },

// 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
  },

但是在将我的

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/index.html',
    }),
    new Dotenv()
  ],

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

// 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
  },

//其他一些配置
条目：{
应用程序：'./src/index.js'
},
插件：[
新的CleanWebPackagePlugin（），
新建WebPackageManifestPlugin（），
新HtmlWebpackPlugin({
//标题：“待办事项应用程序”，
favicon:'src/assets/favicon.ico'，
模板：'./src/app.html'，/来自：

刚刚发现遗漏了什么：

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"
    // }
  },

devServer:{
contentBase:“./public”，
是的，
热：是的，
//历史上的倒退：是的，
历史API回退：{
索引：'/app.html'//