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

Question

我正在创建一个与 Webpack 捆绑在一起的 React & react-router v4 应用程序。我正在创建 async split points使用 Webpack 为我的应用程序按需响应路由器路由异步加载包。

假设我的应用程序被称为“myapp”，当我将它部署到我的服务器时，我的静态 Assets 需要从:

/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，但所有 URL 都是由 HtmlWebpackPlugin 为我的包生成的是 /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