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

Question

我的 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 配置有什么遗漏或错误吗？

Answer 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 上已经有几十个可能了。