webpack-dev-server会编译，但不会刷新我的Web浏览器

Question

bounty到期在2天内。该问题的答案有资格获得+ 150声望赏金。 Steve Quezadas想要引起更多关注来回答这个问题。

我正在尝试通过使用webpack-dev-server“热加载”我的jsx组件。这是我正在使用的命令：

bin/webpack-dev-server --host 0.0.0.0

保存我的jsx代码时，它会有趣地进行编译，但不会通知我的开发Web服务器已进行了更新。我必须手动刷新浏览器才能反映出更改。

我正在使用docker，所以我怀疑它与网络问题有关。我注意到webpack-dev-server使用端口3035，而我的Web开发服务器使用端口3000。

问题，当webpack-dev-server完成编译时，它是否打开与Web服务器的套接字连接以使其刷新？

Answer 1

之所以热模块替换[HMR]在docker中不起作用，是因为Webpack在目录中查找文件更改的方式，它使用fsevent和inotify。这些是webpack用于监视指定目录中文件的模块。对于using webpack-dev-server in a docker image，最好用Mihail Ignatiev和HosseinAgha来解释。

此外，您可以通过在webpack.config.js中指定webpack-dev-server命令来更改其使用的端口号。>

var path = require('path');

module.exports = {
  // It can be changed using port key
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 9000
  }
};
为回答您的问题，webpack-dev-server将在您的文件包中包含一个脚本，该脚本连接到网络套接字以在发生更改时重新加载]

在您的任何文件中。 --public标志可确保脚本知道在哪里寻找WebSocket。服务器默认使用端口8080，因此我们也可以使用--port cli选项指定自定义端口。

此外，建议使用串联模式进行热重装，因为它包括来自websocket的HMR触发器。轮询模式可以用作替代方式，但需要附加的入口点webpack/hot/poll?1000。您可以按以下方式使用它，

webpack-dev-server --inline
要深入了解webpack-dev-server如何使用网络套接字，可以参考official documentation。