这个条目设置如何工作？

Question

我正在使用 react-hot-loader，它的 webpack.config.js 中有此设置：

entry: [
  'webpack-dev-server/client?http://0.0.0.0:3000', // WebpackDevServer host and port
  'webpack/hot/only-dev-server',
  './scripts/index' // Your appʼs entry point
]

然而，在webpack的文档中，我只找到了这种设置：

 entry: {
    app: ["webpack/hot/dev-server", "./app/main.js"]
  }

问题：

webpack/hot/dev-server和webpack/hot/only-dev-server有什么区别？
第一行是什么？ webpack-dev-server 等于 webpack/hot/dev-server 吗？然后 client 是什么，为什么它必须绑定到本地主机地址？最后为什么你需要 2 dev-server -- 第二个只是为了热模块重新加载？

Answer 1

实时重新加载和 HMR 在 webpack 中的工作原理

webpack-dev-server 的解决方案基于socket.io。它实现了一个 socket-io 服务器，并在检测到源文件发生变化时通过发送消息通知客户端。它还提供了一个连接到服务器的 socket.io 客户端库，并提供了有关如何处理来自服务器的消息的逻辑（例如重新加载页面或应用热模块替换）。

webpack-dev-server/client/index.js is the file that contains the client library code and some of the message handlers. If server and client are running on different URLs we can configure the client with correct server URL by using query parameters.

因此，在您的 webpack 配置中，我们告诉 webpack 将此文件嵌入到我们的包中并连接到 socket.io 服务器（即 webpack-dev-server），即运行宁于http://localhost:3000/

附带说明一下，当我们运行 webpack-dev-server --inline.

时，这个文件也会自动嵌入到我们的包中

为什么需要两台服务器？

webpack-dev-server 的主要用例是为我们的捆绑资产提供服务。如果我们的应用程序只是一个静态 html 文件，那么它也可以同时用于为我们的应用程序提供服务。当以这种方式使用 webpack-dev-server 时，我们不需要两台服务器运行ning。尽管这是比使用两台服务器更简单的设置，但它并不能真正反映现实生活。通常我们的应用程序运行运行在比静态 http 服务器更复杂的服务器上（例如 Rails、Django 等）。

因此，我们将这些问题分开，并使用 webpack-dev-server 仅在 URL（例如 http://localhost:3000) and run our application on a different URL (e.g. http://localhost:8080）上为我们的包提供服务。

开发服务器和仅开发服务器

如果您并排打开 dev-server.js and only-dev-server.js，您会发现这些文件之间几乎没有区别。

根据webpack documentation，这两者之间的区别在于dev-server提供了默认的回退机制（即当 HMR 由于某种原因失败时重新加载页面）而 only-dev-server 没有有这种行为。我想这允许开发人员实现他们自己的方式来处理 HMR 故障。

这个条目设置如何工作？

How does this entry setting work?

webpack

实时重新加载和 HMR 在 webpack 中的工作原理

为什么需要两台服务器？

开发服务器和仅开发服务器