使用 webpack 開發服務器進行單頁應用 historyApiFallback 而不使用默認的 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
  },

---

問題

現在發生的是我的開發服務器只接受主路由'/' 。 對於其他所有特定路由，它都以 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"
    // }
  },

現在一切正常。