我正在尝试使用 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 服务器的套接字连接以使其刷新？
热模块替换 [HMR] 在 docker 中不起作用的原因是因为 Webpack 在目录中查找文件更改的方式，它使用fsevent和inotify。这些是 webpack 用来监视指定目录中文件的模块。对于在 docker 镜像中使用 webpack-dev-server，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将在捆绑包中包含一个脚本，该脚本连接到 websocket 以在任何文件发生更改时重新加载。--public标志确保脚本知道在哪里查找 websocket。默认情况下，服务器将使用端口 8080，因此我们还可以使用 cli 选项指定自定义端口--port。
此外，建议将内联模式用于热重载，因为它包含来自 websocket 的 HMR 触发器。轮询模式可以用作替代方法，但需要一个额外的入口点，webpack/hot/poll?1000。 您可以按如下方式使用它，
webpack-dev-server --inline
要深入了解webpack-dev-server如何使用 websockets，您可以参考官方文档。
我想出了自己问题的答案。 端口 3035 需要打开并可供 Web 浏览器热加载才能工作，尽管我不知道详细信息。
好的，我发现在我的特定配置中存在三件事错误。第一 需要加载"Web-dev-server"才能进行热加载。所以我的 Procfile.dev-hmr如下所示：
web: bundle exec rails s -b 0.0.0.0 -p 3000
webpack-dev-server: bin/webpack-dev-server
我像下面这样加载这个文件：
foreman start -f Procfile.dev-hmr
其次，webpack-dev-server 在端口 3035 上运行，因此您必须在 docker 上打开该端口。我使用"port"命令以以下 docker-compose 文件为例执行此操作：
version: '3'
services:
db:
image: postgres:9.3
ports:
- "5432:5432"
volumes:
- ./tmp/db:/var/lib/postgresql/data
web:
build: .
command: foreman start -f Procfile.dev-hmr
volumes:
- .:/myapp
expose:
- 3000
- 3035
ports:
- "3000:3000"
- "3035:3035"
depends_on:
- db
user: "1000:1000"
environment:
- WEBPACKER_DEV_SERVER_HOST=0.0.0.0
- 我不得不将webpacker的服务器主机设置为"0.0.0.0"(我想这是因为docker使用了一些奇怪的IP地址(。我通过设置环境变量来做到这一点：WEBPACKER_DEV_SERVER_HOST=0.0.0.0
我能够在上面的docker-compose.yml脚本中做到这一点。
对于任何在使用 Webpack 5 时遇到这种情况的人，您需要将这一行添加到您的 webpack 配置中：target:web，如此处所述。