启用单页应用（SPA）React热重载Webpack

Question

我在使用webpackdevserver和react router设置单页React应用时遇到了一些问题。如果我使用browserhistory，当进入嵌套路由url（例如/client/view）时，webpack会出现一些问题。这可以通过添加apiFallback来解决，但热重载仍然存在问题。它试图从深层url（/client/view/hot-update.json）加载hot-update.json文件，但该文件不存在，因此导致失败并重新加载页面。如何告诉热重载始终从基本url（/）加载hot-update.json？

- Marc

Answer 1

当我使用publicPath不是''时，遇到了类似的问题，我通过在devServer选项中添加代理条目来解决：

devServer: {
  // ... rest of options
  proxy: {
    '/myPublicPath/*': {
      target: 'http://localhost:8080/',
      pathRewrite: { '^/myPublicPath': '' },
  }
}

除此之外，请确保output.publicPath和devServer.publicPath都已设置并相等。

希望这可以帮到你！

- Kris Selbekk

Answer 2

我遇到了类似的问题。开发服务器一直试图从与URL相关的目录中加载bundle.js。我的publicPath是'/'，不幸的是，其他答案没有帮助。我这样解决了这个问题：

  devServer: {   
    // ... other options 
    historyApiFallback: {
      rewrites: [
        { from: /^.*\/bundle\.js$/, to: '/bundle.js' },
      ]
    }
  }

- Bijou Trouvaille