Sublime Text配合Webpack实现前端热重载编译-sublime-PHP中文网

sublime text 不支持热重载，真正实现 hmr 的是 webpack serve 或 webpack-dev-server；sublime 仅作为编辑器、日志查看器和 sourcemap 跳转入口，需通过 terminus 插件运行 webpack serve 并配合正确 sourcemap 配置才能协同工作。

sublime text配合webpack实现前端热重载编译

Sublime Text 本身不支持热重载（HMR），它没有内置的 dev server 或 WebSocket 通信能力；真正实现热重载的是 webpack-dev-server 或 webpack serve，Sublime 只能作为触发器、日志查看器和跳转入口——关键在于别把责任错配给编辑器。

为什么 Ctrl+B 启动 --watch 不等于热重载

webpack --watch 只是文件变化后重新打包，不启动服务、不注入 HMR runtime、不刷新浏览器。它输出的是静态 bundle 文件，没有 live reload 能力。

webpack --watch 适合构建后手动刷新页面，或配合其他工具（如 BrowserSync）做自动刷新
热重载必须用 webpack serve（v5+）或 webpack-dev-server，且需在 entry 中注入 HMR 客户端代码
Sublime 的 Build System 执行 webpack serve 会阻塞界面（因进程常驻），无法响应编辑操作

如何让 Sublime 真正接入 webpack serve

正确做法是：用 Terminus 插件开一个独立终端运行 webpack serve，再靠 Sublime 的错误解析和 sourcemap 跳转能力协同工作。

PigX UI 前端开发

PigX UI Pro 前端开发指南 - Vue 3 + TypeScript + Element Plus。当用户提到 PigX UI、PigX 前端、lgb-mgui 项目、Vue 3 企业级后台开发、Element Plus 后台开发时使用此技能。

下载

装好 Terminus 后，在 Terminus.sublime-settings 里加一条命令：

{"title": "webpack serve", "cmd": ["npm", "run", "dev"], "shell": true}

确保 package.json 里有 "dev": "webpack serve --open --port 8080" 这类脚本
启动后，Terminus 终端会显示本地地址（如 http://localhost:8080），并实时打印 HMR 日志（如 [HMR] Updated modules:）
错误堆栈若含 ./src/xxx.js:12:3 格式，且项目开启 devtool: 'source-map'，就能 Ctrl+Click 直达源码行

保存 JS 文件时自动触发热重载？别绑 Save Actions

Save Actions 是同步执行，而 webpack serve 是长进程，强行绑定会导致保存卡死、甚至 Sublime 假死。

✅ 正确组合：Save Actions 只用于 lint 或格式检查（如 eslint --fix），不碰构建
✅ webpack serve 必须常驻 Terminus 终端，靠它自身监听文件变化并推送到浏览器
⚠️ 切忌在 .sublime-build 的 "cmd" 里写 ["npx", "webpack", "serve"]：Build System 会等进程退出，但 serve 永不退出
? 如果想快捷启停，可在 Terminus 配置多个命令："title": "stop webpack serve" 对应 kill-port 8080（需提前装 kill-port）

常见跳转失效：sourcemap 和路径格式必须严丝合缝

即使开了 devtool: 'source-map'，Sublime 仍可能点不动错误行——问题几乎都出在路径映射或输出格式上。

Webpack 输出的错误路径必须是相对路径（如 ./src/index.js:5:12），不能是绝对路径或带 webpack:/// 前缀
检查 output.devtoolModuleFilenameTemplate，推荐设为 "[absolute-resource-path]" 或留空默认
如果用了 resolve.alias（比如 @: path.resolve(__dirname, 'src')），确保 webpack.config.js 中 devtool 与之兼容，否则 sourcemap 行号偏移
禁用 --no-color 或重定向 stdout/stderr：Sublime 靠原始输出匹配正则，过滤后就丢失了可点击结构