这个输入设置如何工作？

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,为什么它必须绑定到localhost地址？最后为什么你需要2 dev-server- 是第二个只是热模块重新加载？

Answer 1

实时重载和HMR如何在webpack中运行

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

webpack-dev-server/client/index.js是包含客户端库代码和一些消息处理程序的文件.如果服务器和客户端在不同的URL上运行,我们可以使用查询参数为客户端配置正确的服务器URL .

因此,在您的webpack配置中发生的事情是我们告诉webpack将此文件嵌入到我们的bundle中并连接到运行在http:// localhost:3000 /上的socket.io服务器(即webpack-dev-server)

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

为什么需要两台服务器

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

因此,我们将这些问题分开,并使用webpack-dev-server在URL上提供我们的bundle(例如http:// localhost:3000),并在不同的URL上运行我们的应用程序(例如http:// localhost:8080) .

dev-server和only-dev-server

如果你打开dev-server.js和only-dev-server.js并排侧,你会发现有这些文件之间的差别不大.

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