Sublime Text配合Webpack实现前端热重载编译

很多前端开发者习惯用 Sublime Text 写代码，但总有人问：为什么我按 Ctrl+B 启动 --watch 后，浏览器一点反应都没有？关键要搞清楚一件事：Sublime 本身并不具备热重载（HMR）能力，它没有内置的 dev server，也没有 WebSocket 通信模块。真正负责 HMR 通信和更新的是 webpack-dev-server 或 webpack serve，别把锅甩给编辑器。

简单说，Sublime 只能作为触发器、日志查看器和 sourcemap 跳转入口——它负责写代码和定位报错，剩下的通信与刷新工作，得靠 webpack serve 和浏览器自己搞定。

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

很多人误以为 webpack --watch 就是热重载，其实大不一样。--watch 只是文件变化后重新打包，既不启动服务，也不注入 HMR runtime，更不刷新浏览器。它输出的是静态 bundle 文件，相当于一个“自动构建器”，离热重载还差两步。

• webpack --watch 适合构建后手动刷新页面的场景，或者配合 BrowserSync 做自动刷新——但它本身没有 live reload 能力。
• 真正的热重载必须用 webpack serve（webpack v5+）或 webpack-dev-server，并且需要在 entry 中注入 HMR 客户端代码，才能实现模块替换和浏览器推送。
• Sublime 的 Build System 如果直接执行 webpack serve 会阻塞整个界面（因为进程常驻），编辑器就无法响应后续操作了。

如何让 Sublime 真正接入 webpack serve

正确的做法不是用 Build System，而是用 Terminus 插件开一个独立终端来运行 webpack serve，然后靠 Sublime 的错误解析和 sourcemap 跳转能力协同工作。具体步骤如下：

• 安装 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 文件时自动触发热重载？别绑 Sa ve Actions

有些朋友想偷懒，把 webpack serve 通过 Sa ve Actions 插件来触发——这绝对是个坑。Sa ve Actions 是同步执行的，而 webpack serve 是个长进程，强行绑定会导致保存时卡死，甚至整个 Sublime 假死。

• ✅ 正确的组合：Sa ve 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 靠原始输出匹配正则来生成可点击结构，一旦过滤掉关键信息，跳转就失效了。

热重载不是 Sublime 的功能，而是整个工具链协作的结果：webpack serve 负责通信与更新，浏览器负责接收与渲染，Sublime 负责写代码、看报错、点跳转——每个环节都得对得上，漏一环就只剩手动刷新了。