如何在 webpack-dev-server 中重写某些 URL答案

【问题标题】：How to rewrite certain URLs in webpack-dev-server如何在 webpack-dev-server 中重写某些 URL
【发布时间】：2017-10-10 13:57:27
【问题描述】：

我正在创建一个与 Webpack 捆绑的 React & react-router v4 应用程序。我正在使用 Webpack 创建 async split points 以异步加载包，以按需为我的应用程序的 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 为我的捆绑包生成的所有 URL 都是 /myapp/static/<bundleName>，因此无法获取，因为捆绑包在 /mpapp/<bundleName> 提供。

如何配置 webpack-dev-server 以将 /myapp/static/<bundleName> 重写为 /myapp/<bundleName> 以便它可以路由到实际在 /myapp 下本地提供的捆绑包？

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

非常感谢。

【问题讨论】：

另一个可能的选择是我改变我的构建过程。因此，对于本地开发人员，我的 webpack 配置只是正常提供捆绑包，然后我的产品构建过程使用特定的 /myapp/static publicPath 指令？
我使用 webpack-dev-middleware 编写了一个基本的 node.js express 服务器，可以实现我想要的 - 基本上我将静态路径映射到我的公共路径：app.use("/myapp/static", express.static(path.join(__dirname, "/../public")));。有没有办法通过 webpack-dev-server 实现这一点？谢谢。

标签： webpack webpack-dev-server

【解决方案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

【讨论】：