Question

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

假设我的应用程序被调用＆＃34; myapp＆＃34;，当我将其部署到我的服务器时，我的静态资产需要通过以下方式提供：

/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为我的捆绑生成的所有网址均为/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

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

1 个答案: