这个 webpack devServer 是怎么配置不正确的？

Posted 2023-02-22

【中文标题】这个 webpack devServer 是怎么配置不正确的？

【英文标题】：How is this webpack devServer configured incorrectly?

【发布时间】：2020-11-28 08:04:16

【问题描述】：

我的 webpack-dev-server 遇到了问题。当我尝试在指定路由加载时，例如“http://localhost:3000/login”，我收到以下消息“Cannot GET /login”。

我已经阅读了文档并看到了许多不同的解决方案，但我没有看到我的配置中的缺陷。我的 webpack 设置是这样的。

webpack.config.js

module.exports = 
  mode: 'development',
  entry: './src/index.js',
  output: 
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  ,
  module: [ rules... ],
  devServer: 
    contentBase: path.join(__dirname, 'build'),
    compress: true,
    port: 3000
  ,

我的应用脚本如下所示：

"build": "webpack",
"dev": "webpack-dev-server --open"

如果我运行 dev 应用程序将打开到初始路由 - “/”。如果我单击登录链接 - “/login”，它将正常加载。但是如果我在登录时刷新页面，它会抛出“Cannot GET /login”错误。

我的 webpack 配置有什么遗漏或错误吗？

【问题讨论】：

我相信您缺少 html5 历史模式的服务器配置。这就是我们如何在不更改页面的情况下更改 url（但用户认为我们正在更改页面）。然后你通过将几乎每个请求（不是资产或其他东西）重定向回你的顶部 /index.html 来修复它。当您将最终结果部署到真实服务器时，您也需要这样做，但使用 devserver，配置如下所示：devServer: historyApiFallback: true

这为我解决了谢谢！我确实了解路由背后的逻辑，只是知道有一些方法可以使用 webpack-dev-server 解决它，而不必在 dev 上使用服务器。

【参考方案1】：

webpack-dev-server 只提供两件事：捆绑资产，以及您将其作为contentBase 的值提供给它的目录中的任何内容。当您浏览到 / 然后导航到 /login 时，事情会按照您想要的方式工作，因为我假设您的 webapp 中有某种客户端路由框架。当您刷新浏览器并在 /login 向服务器请求页面时，这些都不适用。

w-d-s 对你来说是 404，因为你的构建目录中没有名为“login”的文件（我怀疑你也有一个编译过的包或同名的块）。您在该目录中有 index.html 文件吗？这就是您访问 localhost:3000/ 时为您提供的服务吗？该文件是否有一个 <script> 标签来加载你的 web 应用程序？

当您访问 /login 时，您期望会发生什么？我假设您想在访问 localhost:3000/login 时显示您的 webapp 的登录屏幕？如果是这样，您很可能需要使用像 express.js 这样的单独服务器来服务器端渲染您的 web 应用程序。此服务器可以与 w-d-s 启动的服务器位于不同的端口上，也可以实际使用 w-d-s 作为中间件，因此您只需要一台具有一个端口的服务器。

乍一看，这似乎是一个不错的资源：@​​987654321@。但如果它对你不起作用，那么 SO 上已经有几十个可能了。

【讨论】：

@ippi 对该问题发表了评论，该评论描述了一种比我更简单的解决方案！如果您不关心生产准备情况，那么这似乎更适合所提出的问题

感谢您的资源！我只是在玩 webpack-dev-server，以便在这个项目上获得更简单的开发体验。在构建应用程序时，服务器端渲染并不是真正需要的，但我一直在为其他一些项目使用它，所以我很欣赏这个链接

@ippi 评论确实对我的解决方案有所帮助！但感谢您花时间回答我的问题，我很感激