如何在webpack-dev-server中重写特定的URL

Question

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

假设我的应用程序名为“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被提供时，HtmlWebpackPlugin生成的所有bundle URL都是/myapp/static/<bundleName>，因此无法获取bundle，因为bundles在/mpapp/<bundleName>下服务。

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

我尝试了各种重写和代理指令，但似乎都会破坏应用程序 - 我确定有一种简单的方法被我忽略了。

非常感谢。

- Mike

---

另一个可能的选择是改变我的构建过程。因此，对于本地开发，我的webpack配置只需正常提供捆绑包，然后我的生产构建过程使用特定的/myapp/static publicPath指令？ - Mike

我已经使用webpack-dev-middleware编写了一个基本的node.js express服务器，实现了我想要的功能 - 基本上我将静态路径映射到我的公共路径：app.use("/myapp/static", express.static(path.join(__dirname, "/../public")));。是否有一种方法可以使用webpack-dev-server实现这一点？谢谢。 - Mike

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

- Hristo