首页
学习
活动
专区
工具
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
  • win10WSL设置前端开发环境

    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

    王炸!!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

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

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

    1.6K30

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

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

    37410

    WSL2安装Ubantu与Docker-desktop部署

    WSL2(windows subsystem for linux 2)是微软推出Windows上Linux子系统,部署WSL2你将可以windows上使用Linux系统,其使用体验无限接近与直接安装一台...这里我部署WSL2主要是为了想在windows上使用docker。...上不支持docker,所以我们走曲线救国道路,通过安装WSL2来部署Linux,再让docker子系统上来实现dockerWindows上运行) 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.5K20

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

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

    33610

    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

    14.4K362

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

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

    11K143

    简单了解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文件和一个

    68330

    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

    84620

    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

    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达到相同效果

    12K52

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

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

    1.3K20

    【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

    Windows系统使用Docker部署Focalboard团队协作工具详细流程

    使用Docker本地部署Focalboard 1.1 Windows安装 Docker 1.2 使用Docker部署Focalboard 2. 安装Cpolar内网穿透工具 3....由于Focalboard是开源项目,可以将其部署自己本地服务器上,数据内容掌握自己手里,更加安全可靠。下面将介绍如何使用Docker部署Focalboard。...直接点击上方Docker80:8000,或者打开浏览器,输入localhost:8000 进入到Focalboard登录界面,点击下方注册一个账号 登录后,进入到Focalboard项目管理界面,...Cpolar安装成功后,浏览器上访问http://localhost:9200,使用cpolar账号登录,登录后即可看到Cpolar web 配置界面,结下来web 管理界面配置即可。...点击更新(注意,点击一次更新即可,不需要重复提交) 更新完成后,打开在线隧道列表,此时可以看到公网地址已经发生变化,地址名称也变成了固定二级子域名名称域名 最后,我们使用固定公网https地址在任何浏览器打开访问

    40010

    了不起 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

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

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

    46084
    领券