启用单页应用响应热重载 webpack

Posted 2023-02-21

【中文标题】启用单页应用响应热重载 webpack

【英文标题】：Enable single page app react hot reload webpack

【发布时间】：2017-03-02 18:43:49

【问题描述】：

我在使用带有 webpackdevserver 的反应路由器设置单页反应应用程序时遇到了一些问题。如果我使用 browserhistory，webpack 在输入嵌套路由 url（例如 /client/view）时会出现一些问题。这可以通过添加 apiFallback 来解决，但热重载仍然存在问题。它尝试从不存在的深层 url (/client/view/hot-update.json) 加载 hot-update.json 文件，因此失败并重新加载页面。如何告诉 hotreload 始终从基本 url (/) 加载 hot-update.json？

【参考方案1】：

我在使用 '' 以外的 publicPath 时遇到了类似的问题，我通过在 devServer 选项中添加代理条目解决了这个问题：

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

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

希望这会有所帮助！

【参考方案2】：

我遇到了类似的问题。开发服务器不断尝试从相对于 url 的目录加载 bundle.js。我的publicPath 是'/'，不幸的是，另一个答案没有帮助。我解决了这样的问题：

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