Sublime Text配合Webpack前端静态资源打包-sublime-PHP中文网

根本原因是sublime构建系统默认不加载shell的path环境变量，需显式设置"shell": true、"working_dir": "${project_path}"，并用["npx", "webpack"]调用项目本地版本，避免全局安装和路径问题。

sublime text配合webpack前端静态资源打包

根本不是 Sublime 有问题，而是它默认不加载 shell 的 PATH 环境变量，npx 和 npm 都找不到。Windows 下必须加 "shell": true；macOS/Linux 也建议加，否则从 Dock 启动时 profile（如 ~/.zshrc）压根没读。

真正稳的写法是绕过环境变量依赖：

"cmd": ["npx", "webpack", "--config", "webpack.config.js"] —— 用 npx 直接调项目本地的 webpack，前提是 package.json 存在且已执行过 npm install
"working_dir": "${project_path}" 必须显式设置，否则 npx 不知道该进哪个目录找 node_modules/.bin/webpack
别写 "cmd": ["webpack"] —— 全局安装容易版本错乱，且跨项目不可靠

webpack --watch 是长时进程，Sublime 的 Build System 设计上不支持持续输出和交互中断。直接塞进 "cmd" 里，Ctrl+B 一按就假死，日志刷不出来，错误也抓不到。

正确解法分两路：

用构建变体（variant）：在 .sublime-build 里加 "variants" 字段，定义一个叫 Webpack — Watch 的选项，按 Ctrl+Shift+B（Win/Linux）或 Cmd+Shift+B（macOS）唤出菜单再选——但依然不能滚动看日志
装 Terminus 插件，配一条独立终端命令：{"title": "webpack watch", "cmd": ["npm run watch"], "shell": true} —— 错误堆栈可展开、点击能跳转到 src/xxx.js:12:3 行号

Sublime 原生不支持“保存即构建”，得靠 Save Actions 这类插件。但有个致命陷阱：Save Actions 是同步触发的，如果把构建命令设成 ["npx", "webpack", "--watch"] 或任何长时间运行的命令，保存操作会卡住，直到命令结束。

PigX UI 前端开发

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

下载

安全做法只绑定一次性构建：

在 Save Actions → Settings – User 里写：{"save_actions": [["build", {"build_system": "Webpack.sublime-build"}]]}
Webpack.sublime-build 的 "cmd" 必须是短时任务，比如 ["npx", "webpack", "--mode", "development"] 或 ["npm", "run", "build"]
--watch 模式另起 Terminus 终端常驻，两者互不干扰

这通常不是 Sublime 的问题，而是 Webpack 输出的错误路径格式和 Source Map 配置没对上。Sublime 只认 file:line:column 格式（例如 ./src/index.js:42:5），且要求 devtool 开启了可用的 Source Map。

检查三件事：

Webpack 配置里必须有 devtool: 'source-map' 或 'cheap-module-source-map'（开发时推荐后者）
构建输出的错误信息里路径要是相对路径（./src/...），不是绝对路径（/Users/xxx/project/src/...）
Sublime 的 .sublime-build 文件里没配 file_regex？默认能匹配 ^([^:]+):(\d+):(\d+:)?，但如果你用了自定义 loader 或插件改了报错格式，就得手动调正则

Source Map 文件得生成在输出目录里，且和 bundle 同名同目录，否则跳转路径解析会失效。这点容易被忽略，尤其当 output.path 和 devtool 的 sourceMapFilename 不一致时。