我正在尝试使用 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 完成编译时，它是否会打开与 webserver 的套接字连接以使其刷新？
热模块替换 [HMR] 在 docker 中不起作用的原因是 Webpack 查找目录中文件更改的方式，它使用fsevent and inotify。这些是 webpack 用于监视指定目录中的文件的模块。为了在 docker 镜像中使用 webpack-dev-server https://stackoverflow.com/questions/42445288/enabling-webpack-hot-reload-in-a-docker-application，最好的解释是米哈伊尔·伊格纳季耶夫 https://stackoverflow.com/users/2823972/mihail-ignatiev and 侯赛因·阿加 https://stackoverflow.com/users/2245902/hosseinagha.
另外，您可以更改端口号webpack-dev-server命令通过在 webpack.config.js 中指定来使用。
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 以在发生更改时重新加载在您的任何文件中。这--publicflag 确保脚本知道在哪里寻找 websocket。服务器默认使用8080端口，所以我们也可以使用指定自定义端口--port命令行选项。
此外，建议使用内联模式进行热重载，因为它包含来自 Websocket 的 HMR 触发器。轮询模式可以作为替代方案，但需要额外的入口点，webpack/hot/poll?1000。
您可以按如下方式使用它，
webpack-dev-server --inline
深入了解如何webpack-dev-server使用websockets，可以参考官方文档 https://webpack.js.org/configuration/dev-server/#devserverport.
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
