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

2023年4月9日 553次阅读

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

假设我的应用程序名为“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> to / myapp /< bundleName>以便它将路由到实际在/ myapp下本地提供的捆绑包？

我已经尝试了各种重写和代理指令,但我似乎打破了应用程序 – 我确信有一种简单的方法我可以忽略它.

非常感谢.

最佳答案 尝试为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

点赞