如何重写 webpack-dev-server 中的某些 URL

Question

我正在创建一个与 Webpack 捆绑在一起的 React 和 React-router v4 应用程序。我正在使用 Webpack 创建异步分割点，以用于按需应用程序的反应路由器路由的异步加载包。

假设我的应用程序称为“myapp”，当我将其部署到我的服务器时，我的静态资产需要从以下位置提供：

/myapp/static/<assetName>

为了在部署到服务器时异步包加载正常工作，我的 Webpack 输出配置如下：

output: {
  path: path.resolve(__dirname, "build"),
  publicPath: "/myapp/static/",
  chunkFilename: "[name].[chunkhash].bundle.js",
  filename: "[name].[chunkhash].bundle.js"
}

在我的 devServer 部分我有这个：

devServer: {
  historyApiFallback: true,
  inline: true,
  port: 4000,
  publicPath: "/myapp" // this is so my app is served from http://locahost:4000/myapp 
}

当我实际部署到我的服务器时，我没有任何问题，但是当我运行 webpack-dev-server 并访问时：

http://localhost:4000/myapp

...html 已提供，但为我的捆绑包生成的所有 URLHtmlWebpackPlugin均已提供/myapp/static/<bundleName>，因此无法获取，因为捆绑包正在提供/mpapp/<bundleName>。

如何配置 webpack-dev-server 进行重写，/myapp/static/<bundleName>以便/myapp/<bundleName>它将路由到实际在本地提供服务的包/myapp？

我已经尝试了各种重写和代理指令，但我似乎只是破坏了应用程序 - 我确信有一种我忽略的简单方法。

非常感谢。

Answer 1

尝试像这样设置索引historyApiFallback：

historyApiFallback: {
  index: "/myapp/static/"
},

有关更多信息，请参阅webpack和connect-history-api-fallback文档：

https://webpack.js.org/configuration/dev-server/#devserver-historyapifallback https://github.com/bripkens/connect-history-api-fallback