sublime text 本身不运行 webpack dev server,也不支持 hmr 的 runtime 注入机制;它只能通过 livereload 实现文件保存后浏览器自动刷新,而非 webpack 原生的 module.hot.accept() 热替换。

为什么 Sublime 里配不了真正的 Webpack HMR
Sublime Text 本身不运行 Webpack Dev Server,也不支持模块热替换(HMR)的 runtime 注入机制。所谓“热更新”,它只能配合外部服务实现文件变动→浏览器刷新,不是 Webpack 原生的 module.hot.accept() 那套。你真正能控制的只有:监听保存、触发构建、通知浏览器重载。
用 LiveReload 实现保存即刷新
这是最轻量、最稳定、且与 Sublime 深度契合的方式。LiveReload 插件监听文件变化,通过 WebSocket 通知已激活扩展的浏览器自动刷新页面。
- 安装
Package Control(若未装):按Ctrl+`调出控制台,粘贴官网 Python 安装脚本并回车,重启 Sublime - 按
Ctrl+Shift+P→ 输入Install Package→ 回车 → 搜索并安装LiveReload - 去 Chrome Web Store 安装
LiveReload扩展,并点击地址栏旁图标启用(实心圆点) - 右键项目根目录文件 →
Enable LiveReload,或点击状态栏 LiveReload 图标开启监听
此时修改 src/index.js 或 index.html 并保存,浏览器会秒级刷新——但注意:它不解析 sourcemap,也不跳转错误行,只是纯刷新。
让 Ctrl+Click 跳转 Webpack 错误行号
LiveReload 不处理构建错误;要让 Sublime 在构建失败时支持点击跳转,得靠 Build System + source map 输出格式匹配。
- Webpack 配置中必须设
devtool: 'source-map'或'inline-source-map' - Build System 文件(如
Webpack.sublime-build)里确保"cmd": ["npx", "webpack"],且含"shell": true和"working_dir": "${project_path}" - 错误输出不能被重定向或过滤:去掉
--no-color、不要用2>&1 | grep类管道,否则 Sublime 捕获不到./src/App.js:12:5这种标准格式 - 如果用了 Babel,检查
@babel/preset-env是否启用了sourceType: 'unambiguous',否则 sourcemap 行号偏移
别把 --watch 绑到 Ctrl+B 上
npx webpack --watch 是阻塞式长进程,直接塞进 Build System 会导致 Sublime 卡死、无法保存、切换标签页失灵。
- 放弃在
.sublime-build里写["npx", "webpack", "--watch"] - 真正需要常驻监听时,开个终端窗口手动跑
npx webpack --watch,或用Terminus插件建独立终端任务 - 开发阶段优先用
webpack-dev-server:在package.json加脚本"dev": "webpack-dev-server --mode development --hot",然后终端里跑npm run dev - LiveReload 和
webpack-dev-server别共存——后者自带浏览器自动刷新,再开 LiveReload 会冲突
真正容易被忽略的是:Sublime 的构建系统和 LiveReload 是两套独立机制,它们不共享环境变量、不互通日志、也不协调生命周期。想同时获得错误跳转 + 自动刷新,就得分别配好 Build System 和 LiveReload,并明确知道哪个动作该走哪条路径。











