在不使用默认 index.html 文件的情况下将 webpack 开发服务器用于单页应用程序 historyApiFallback

Question

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

在此之前，我的 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,
  },

但是在将 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"
    // }
  },

现在一切正常。

在不使用默认 index.html 文件的情况下将 webpack 开发服务器用于单页应用程序 historyApiFallback

Using webpack dev server for Single Page App historyApiFallback without using the default index.html file

javascript

html5-history

webpack

webpack-dev-server