这个输入设置如何工作？

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的doc中，我只找到这种设置：

 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是包含客户端库代码和一些消息处理程序的文件。如果服务器和客户端在不同的URL上运行，我们可以使用query parameters为客户端配置正确的服务器URL。

所以，在你的webpack配置中发生的事情是我们告诉webpack将这个文件嵌入我们的bundle并连接到http://localhost:3000/ <上运行的socket.io服务器（即webpack-dev-server） / p>

作为旁注，当我们运行webpack-dev-server --inline时，也会自动将此文件嵌入到我们的包中。

为什么需要两台服务器？

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

因此，我们将这些问题分开，并使用webpack-dev-server仅在URL（例如http://localhost:3000）上提供我们的捆绑包，并在不同的URL上运行我们的应用程序（例如http://localhost:8080）。

dev-server和only-dev-server

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

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