如何告诉webpack开发服务器为任何路由提供index.html

Question

React路由器允许React应用程序处理/任意/route。为了工作，我需要我的服务器在任何匹配的路由上发送React应用程序。

但是webpack dev server不能处理任意的endpoint。

这里有一个使用附加快递服务器的解决方案。如何允许webpack-dev-server允许来自react-router的入口点

但我不想启动另一个express服务器来允许路由匹配。我只想告诉WebpackDevServer匹配任何url，并将我的react应用程序发送给我。请

Answer 1

在配置中添加公共路径有助于webpack理解真正的根（/），即使您在子例程上，例如/article/uuid

因此，请修改您的网页包配置并添加以下内容：

output: {
    publicPath: "/"
}

devServer: {
    historyApiFallback: true
}

如果没有公共路径，资源可能无法正确加载，只有index.html.

在网页上测试4.6

配置的较大部分（只是为了更好地理解）：

entry: "./main.js",
output: {
  publicPath: "/",
  path: path.join(__dirname, "public"),
  filename: "bundle-[hash].js"
},
devServer: {
  host: "domain.local",
  https: true,
  port: 123,
  hot: true,
  contentBase: "./public",
  inline: true,
  disableHostCheck: true,
  historyApiFallback: true
}

Answer 2

webpack dev server官方文档中的historyApiFallback选项清楚地解释了如何通过使用

historyApiFallback: true

当找不到路线时，它会回到index.html

或

// output.publicPath: '/foo-app/'
historyApiFallback: {
  index: '/foo-app/'
}

Answer 3

我发现最简单的解决方案是包含一个小配置：

  devServer: {
    port: 3000,
    historyApiFallback: {
      index: 'index.html'
    }
  }

我发现这个访问： PUSHSTATE与WEBPACK-DEV-SERVER.