首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在WSL 2中使用Docker中的webpack-dev-server保存时,浏览器不会更新

的问题可能是由于文件系统的不同步导致的。WSL 2使用的是虚拟化技术,而Docker容器中运行的webpack-dev-server实际上是在WSL 2中的Linux环境中运行的。

解决这个问题的方法是使用文件系统的监听机制来实现文件变化的实时更新。可以通过在webpack的配置文件中添加watchOptions来启用文件监听,确保文件变化时webpack-dev-server能够及时更新。

另外,还需要确保在Docker容器中的webpack-dev-server配置中,publicPath参数正确设置为开发服务器的访问路径。

以下是一个示例的webpack配置文件:

代码语言:txt
复制
const path = require('path');

module.exports = {
  // 入口文件
  entry: './src/index.js',
  // 输出文件
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/dist/' // 开发服务器的访问路径
  },
  // 开发服务器配置
  devServer: {
    contentBase: path.resolve(__dirname, 'dist'),
    watchContentBase: true // 启用文件监听
  }
};

推荐的腾讯云相关产品是腾讯云容器服务(Tencent Kubernetes Engine,TKE),它是一种高度可扩展的容器管理服务,可帮助您轻松部署、管理和扩展容器化应用程序。您可以使用TKE来部署和管理包含webpack-dev-server的Docker容器,从而实现更好的开发体验。

更多关于腾讯云容器服务的信息,请访问:腾讯云容器服务

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用本地 Docker 更好地开发?我们总结了这八条经验

/bin/webpack-dev-server 这样,当我们在构建服务(使用 docker-compose)时,镜像就只构建一次。...4 在命名卷中缓存依赖项 正如第一点所提到的,我们不会将代码依赖项放到镜像中,而是在启动时安装它们。...5 将临时的东西放入命名卷中 上一点提到使用命名卷来提高性能,这里有另一个有用的技巧:将保存只读文件的目录放入命名卷中,阻止它们被同步回本地机器(这会带来很大的性能开销),特别是 log 和 tmp...在大多数情况下,假设在开发应用程序时总是有其他服务在运行,那么 exec(特别是 docker-compose exec)就是你所需要的,因为它运行起来更快,而且不会留下任何奇怪的文件(如果你忘了在 run...:/app - yarn:/app/node_modules 这样,在 Rails 开发服务器完全启动并运行之前,webpack-dev-server 是不会启动的。

2.1K40
  • 在win10的WSL中设置前端开发环境

    VSCode 开发 WSL 下的项目 无论是 WSL1 还是 WSL2,和 windows 环境下的原生软件结合工作时都还有一定局限性。...,webpack 实时编译不执行 较新的 win10 版本中可以正常监听并重新编译,但浏览器不会随之更新 目前唯一成功的方案是在 VSCode 中结合插件达成的,按文档 https://code.visualstudio.com.../docs/remote/wsl 做如下设置: 在 VSCode 中安装 Remote Development 扩展包 在 wsl 窗口中进入要开发的项目目录,运行 code ....安装必要的组件 VSCode 自动重启后,在 wsl 中运行 npm 命令正常开发即可 同时要注意这里项目中的 npm 依赖项要在 wsl 环境下重新 install,原来在 cmd / powershell...结合 WSL 使用 Docker in Windows10 如果项目涉及到要用 docker 打包,可以在 win10 中先安装好 Docker,并作如下设置: 开启 Docker in Windows10

    4.2K20

    本地搭建大语言模型并结合内网穿透工具轻松实现无公网IP异地远程连接使用

    在本地运行大语言模型有诸多优点: 比如可以保护隐私、不会产生费用、可以无视网络问题、可以尝鲜各种开源模型等等。...然后将上边在docker中部署Open WebUI的命令复制后粘贴到终端中,回车。...然后等待安装完毕即可:如下图所示 安装完成后,在Docker Desktop中可以看到Open WebUI的web界面地址为:https://localhost:3000 点击后,会在浏览器打开登录界面...: 点击sign up注册,账号,邮箱,密码记好,下次登录时需要用到邮箱和密码登录: 然后点击create account创建账号即可:然后就能在浏览器中使用类似chatgpt界面的Open WebUI...cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可。

    68510

    Win电脑使用Ollama与Open Web UI搭建本地大语言模型运行工具

    在本地运行大语言模型有诸多优点: 比如可以保护隐私、不会产生费用、可以无视网络问题、可以尝鲜各种开源模型等等。...然后将上边在docker中部署Open WebUI的命令复制后粘贴到终端中,回车。...然后等待安装完毕即可:如下图所示 安装完成后,在Docker Desktop中可以看到Open WebUI的web界面地址为:https://localhost:3000 点击后,会在浏览器打开登录界面...: 点击sign up注册,账号,邮箱,密码记好,下次登录时需要用到邮箱和密码登录: 然后点击create account创建账号即可:然后就能在浏览器中使用类似chatgpt界面的Open WebUI...cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可。

    2.3K10

    王炸!!IDEA 2021.1 推出语音、视频功能,边写代码边聊天,我真的服了…

    WSL 2 对比 WSL 1 主要优势: 提高文件系统性能 支持完全的系统调用兼容性 WSL 2 使用最新、最强大的虚拟化技术,可以在轻量级实用工具虚拟机 (VM) 中运行 Linux 内核,除了跨操作系统文件系统的性能外...真的让 Java 开发上了一个新台阶,像 JDK、Maven、Docker 之类的依赖环境都可以直接安装和运行在 WSL 2 中,即 Windows 开发使用原生 Linux 内核,以避免使用 Windows...4、运行目标 如图所示,传统的应用程序默认是在本机环境中运行的,现在可以在远程机器、或者 Docker 容器中运行、测试、profile、调试代码。...这样我的 Test 类就可以在 java:8 这个 Docker 容器运行了,也还可以在其他远程主机中运行,这个功能是不是也很强大、很实用呢?懂的自然懂!...9.3 UML 图新配色方案 现在 IDEA 使用浅色模式时,UML 也同时呈现浅色,使 UML 更加整洁好看。 ?

    1.3K40

    Windows本地部署Ollama+qwen本地大语言模型Web交互界面并实现公网访问

    在本地运行大语言模型有诸多优点: 比如可以保护隐私、不会产生费用、可以无视网络问题、可以尝鲜各种开源模型等等。...然后将上边在docker中部署Open WebUI的命令复制后粘贴到终端中,回车。...然后等待安装完毕即可:如下图所示 安装完成后,在Docker Desktop中可以看到Open WebUI的web界面地址为:https://localhost:3000 点击后,会在浏览器打开登录界面...: 点击sign up注册,账号,邮箱,密码记好,下次登录时需要用到邮箱和密码登录: 然后点击create account创建账号即可:然后就能在浏览器中使用类似chatgpt界面的Open WebUI...cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可。

    13K145

    快来看看,新版 IDEA 2021.1正式发布,新增了这几个超实用功能!

    IntelliJ IDEA 2021.1 EAP版本已经发布了很久,就在今天,终于等到正式版的发布。这个大版本最大的更新内容,就是支持WSL 2和JAVA 16了。...我们的程序不光可以运行在本地,在WSL 2,在远程SSH主机,还可以再Docker中,一键运行在Docker。...而且Docker 对WSL 2的支持也非常好,我们还可以运行在WSL 2中的Docker,同时用Windows 中的Docker管理工具,真香!...3 内置的HTML预览器 在HTML文件中,只需要点击右上角的IDEA图标,就可以使用内置预览器去预览网页了,而且实时刷新,再也不用打开浏览器预览。...4 搜索范围的增强 以后我们在搜索时,还可以添加外部的依赖到作用域中,完成更全面的搜索。

    1.7K30

    简单了解webpack热更新原理

    webpack热更新Hot Module Replacement应该所有人都知道,现象就是你修改代码保存之后,浏览器不会刷新,只会修改你更改过的依赖代码。...我们平时用webpack-dev-server如果没有配置,是直接刷新浏览器,并不是热更新。...我们一般用webpack-dev-server启动一个开发服务,webpack内部实现watch,文件发生修改就重新打包编译保存在内存中,webpack-dev-server依赖中间件webpack-dev-middleware...启动开发服务之后,浏览器和服务端是通过websocket进行长连接的,可以自己在network里面看。 刚启动: ? 热更新之后: ?...会重新打包编译到内存中,然后webpack-dev-server依赖中间件webpack-dev-middleware和webpack之间进行交互,每次热更新都会请求一个携带hash值的json文件和一个

    69030

    webpack热更新原理(面试大概率会问)_2023-02-28

    主要是通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态。 只更新变更内容,以节省宝贵的开发时间。 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。...webpack-dev-server/client 端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据...例如,在开发 Web 页面过程中,当你点击按钮,出现一个弹窗的时候,发现弹窗标题没有对齐,这时候你修改 CSS 样式,然后保存,在浏览器没有刷新的前提下,标题样式发生了改变。...思考:使用 HMR 的过程中,通过 Chrome 开发者工具我知道浏览器是通过 websocket 和 webpack-dev-server 进行通信的,但是 websocket 的 message 中并没有发现新模块代码...再就是因为不使用 webpack-dev-server 的前提,使用 webpack-hot-middleware 和 webpack 配合也可以完成模块热更新流程,在使用 webpack-hot-middleware

    85620

    webpack热更新原理(面试大概率会问)

    主要是通过以下几种方式,来显著加快开发速度:保留在完全重新加载页面时丢失的应用程序状态。只更新变更内容,以节省宝贵的开发时间。调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。...webpack-dev-server/client 端并不能够请求更新的代码,也不会执行热更模块操作,而把这些工作又交回给了 webpack,webpack/hot/dev-server 的工作就是根据...例如,在开发 Web 页面过程中,当你点击按钮,出现一个弹窗的时候,发现弹窗标题没有对齐,这时候你修改 CSS 样式,然后保存,在浏览器没有刷新的前提下,标题样式发生了改变。...思考:使用 HMR 的过程中,通过 Chrome 开发者工具我知道浏览器是通过 websocket 和 webpack-dev-server 进行通信的,但是 websocket 的 message 中并没有发现新模块代码...再就是因为不使用 webpack-dev-server 的前提,使用 webpack-hot-middleware 和 webpack 配合也可以完成模块热更新流程,在使用 webpack-hot-middleware

    1K00

    WSL2安装Ubantu与Docker-desktop部署

    WSL2(windows subsystem for linux 2)是微软推出的Windows上的Linux子系统,部署WSL2你将可以在windows上使用Linux系统,其使用体验无限接近与直接安装一台...这里我部署WSL2主要是为了想在windows上使用docker。...上不支持docker,所以我们走曲线救国的道路,通过安装WSL2来部署Linux,再让docker跑在子系统上来实现docker在Windows上的运行) Windows开启haper-V虚拟化 我使用的是...设置为默认版本 wsl --set-default-version 2 # 从WSL1升级到WSL2,浏览器下载并安装Linux内核更新包,地址如下: https://wslstorestorage.blob.core.windows.net...,你进入WSL2中输入docker可以看见已经有docker了,同时你在powershell中也能查看docker 修改docker镜像存储位置 经过上面的一顿操作,我们后面pull镜像的时候是直接下载到

    2.7K20

    【Webpack】627- 了不起的 Webpack HMR 学习指南(含源码分析)

    HMR 主要通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态; 只更新变更内容,以节省宝贵的开发时间; 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。...这样 bundle.js 文件代码就作为一个简单 JavaScript 对象保存在内存中,当浏览器请求 bundle.js 文件时,devServer 就直接去内存中找到上面保存的 JavaScript...当我们在配置文件中配置了 devServer.watchContentBase 为 true ,Webpack-dev-server 会监听配置文件夹中静态文件的变化,发生变化时,通知浏览器端对应用进行浏览器刷新...保存状态 浏览器端将_sendStats 发送过来的 hash 保存下来,它将会用到后模块热更新。 ? // webpack-dev-server\lib\Server.js // 1..../library.js', function() { // 使用更新过的 library 模块执行某些操作... }) } 11.热更新错误处理 在热更新过程中,hotApply 过程中可能出现

    1.1K20

    了不起的 Webpack HMR 学习指南(含源码分析)

    HMR 主要通过以下几种方式,来显著加快开发速度: 保留在完全重新加载页面时丢失的应用程序状态; 只更新变更内容,以节省宝贵的开发时间; 调整样式更加快速 - 几乎相当于在浏览器调试器中更改样式。...这样 bundle.js 文件代码就作为一个简单 JavaScript 对象保存在内存中,当浏览器请求 bundle.js 文件时,devServer 就直接去内存中找到上面保存的 JavaScript...当我们在配置文件中配置了 devServer.watchContentBase 为 true ,Webpack-dev-server 会监听配置文件夹中静态文件的变化,发生变化时,通知浏览器端对应用进行浏览器刷新...保存状态 浏览器端将_sendStats 发送过来的 hash 保存下来,它将会用到后模块热更新。.../library.js', function() { // 使用更新过的 library 模块执行某些操作... }) } 11.热更新错误处理 在热更新过程中,hotApply 过程中可能出现

    1.2K00

    终于来了,IDEA 2021.1版本正式发布!

    赶紧来看看,2021年这个大版本有哪些更新内容吧! WSL 2的支持 ? 都说Windows 是Linux最好的发行版,可是你的IDE不支持WSL运行那又有何用呢?...我们的程序不光可以运行在本地,在WSL 2,在远程SSH主机,还可以再Docker中,一键运行在Docker。...而且Docker 对WSL 2的支持也非常好,我们还可以运行在WSL 2中的Docker,同时用Windows 中的Docker管理工具,真香! 内置的HTML预览器 ?...在HTML文件中,只需要点击右上角的IDEA图标,就可以使用内置预览器去预览网页了,而且实时刷新,再也不用打开浏览器预览。 搜索范围的增强 ?...以后我们在搜索时,还可以添加外部的依赖到作用域中,完成更全面的搜索。

    1.3K20

    在 Windows 下使用 WSL2 搭建 Kubernetes 集群

    ,特别是 WSL2 版本推出以后,完全具有了在 WSL2 中运行 Docker 的能力了,所以现在我们几乎可以无缝地在 WSL2 上面运行 Kubernetes。...但实际上 Docker 也专门开发了可以使用 WSL2 中的 Docker 守护进程的桌面管理程序, 打开 Docker Desktop WSL2 backend 页面,下载最新的 Docker Desktop...我们还需要在 Resources 中设置要从哪个 WSL2 发行版中访问 Docker,如下图使用的是 Ubuntu-20.04: ?...到这里集群就创建成功了,我们也可以在 Windows 的浏览器中打开上面的 Kubernetes master 地址: ?...安装成功后,我们可以使用如下命令创建一个临时的代理: $ kubectl proxy 然后在 Windows 浏览器中我们可以通过如下地址来访问 Dashboard 服务: http://localhost

    15.2K362

    2024程序员容器化上云之旅-第2集-Ubuntu-WSL2-Windows11版:接近深洞

    看来apt的包库还没更新到2.34.2最新版。不过2.34.1也足够好了。3.3 克隆代码✅有了git,马意浓于是进入到一个保存源代码的文件夹,运行git clone命令。...(因为众所周知的原因,本系列文章不会包含外部恋街。如你需要可以在留言区留言。)...他从那本WSL2的书里了解到,在docker desktop的settings里,如果设置了允许docker与WSL2 Ubuntu distro集成,那么在Ubuntu终端窗口里,就能使用docker...马意浓用鼠标点击docker desktop中pgadmin-1那一行的5050:80链接,打开了一个浏览器。数据库管理界面出现在眼前。他在数据库管理界面中,输入了登录信息。...但所输入的购物项,却没有按照预期出现在下面的列表中。他预感到一定是出问题了。他于是在浏览器中,按快捷键Ctrl+Shift+I,打开Developer tools窗口,想看看出错日志。

    48184

    Windows安装Ollama并通过内网穿透远程访问本地qwen大语言模型实操

    setx OLLAMA_MODELS "D:\ollama_model" 模型下载完成后,我们就可以在终端中输入问题进行使用了: 至此,在Windows本地部署ollama并运行qwen大语言模型就已经完成了...然后将上边在docker中部署Open WebUI的命令复制后粘贴到终端中,回车。...然后等待安装完毕即可:如下图所示 安装完成后,在Docker Desktop中可以看到Open WebUI的web界面地址为:https://localhost:3000 点击后,会在浏览器打开登录界面...: 点击sign up注册,账号,邮箱,密码记好,下次登录时需要用到邮箱和密码登录: 然后点击create account创建账号即可:然后就能在浏览器中使用类似chatgpt界面的Open WebUI...cpolar安装成功后,在浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到cpolar web 配置界面,结下来在web 管理界面配置即可。

    71910

    windows单机搭建k8s环境

    最新的Docker Desktop默认使用WSL 2来运行的,按照上面的提示说这样性能更好: [fivpqy2dw0.png] 但是WSL2默认把文件放到C盘,而且控制台上也没提供设置数据存放目录,看官网说明...,启用WSL后,docker运行数据都在WSL发行版中,文件位置都只能由WSL管理: [cm846h5p2w.png] 这两个目录是放在C盘下的,运行过多容器对C盘压力不小......导出到指定分区的目录下,以【D:\wsl\docker-desktop-data\docker-desktop-data.tar】为例(原有的docker images不会一起导出): wsl...,先使用管理员身份运行powershell: [ix5sg3os3t.png] 在powershell命令行下进入到刚才下载的脚本目录,先开启策略→选择是→执行脚本→关闭策略: Set-ExecutionPolicy...3.3 下载kubectl客户端 官网最新版本下载地址 下载后将该文件移动到【C:\Windows\System32】下面,就可以在命令行使用kubectl了(也可以通过修改环境变量PATH达到相同效果

    12.9K52
    领券