Sublime Text可通过配置Build System实现一键触发Webpack编译。1. 创建自定义构建系统，运行"npm run build"；2. 配置watch模式实现自动编译；3. 结合Terminus和Save Actions插件实现实时反馈与保存即编译；4. 使用项目级配置共享构建设置，提升团队协作效率。
在前端开发中，Webpack 等构建工具已成为标准配置。虽然 Sublime Text 本身不是集成开发环境（IDE），但通过合理配置，完全可以实现一键触发 Webpack 编译流程，提升开发效率。
使用 Build System 实现一键编译
Sublime Text 内置的 Build System 支持自定义命令，可以用来运行 Webpack 或其他构建脚本。
操作步骤：
- 打开菜单 Tools → Build System → New Build System…
- 将内容替换为以下 JSON 配置（以本地安装 webpack-cli 为例）：
"cmd": ["npm", "run", "build"],
"working_dir": "${project_path:${folder}}",
"selector": "source.js"
}
- 保存为 Webpack.sublime-build
- 之后在 JS 文件中按 Ctrl+B 即可执行 npm run build
监听模式下自动编译（Watch 模式）
若希望保存文件时自动触发编译，可配置启动 webpack --watch：
立即学习“前端免费学习笔记（深入）”；
- 修改 build 命令中的 cmd 为：
["npm", "run", "watch"] - 确保 package.json 中已定义 watch 脚本，如：
"scripts": { "watch": "webpack --watch" } - 启动后，Sublime 会持续监听输出，适合配合浏览器自动刷新使用
结合插件增强体验
单纯 Build System 输出有限，可通过插件提升反馈能力：
- Terminus：在 Sublime 内嵌终端中运行 webpack，实时查看进度和错误
- 配置 Terminus 启动命令示例：
{"title": "webpack","cmd": ["npm run watch"],"shell": true} - Save Actions：设置“保存文件时自动构建”，实现保存即编译
项目级配置建议
针对不同项目定制构建行为更高效：
- 使用 Project 菜单保存项目配置（.sublime-project）
- 在项目配置中内联定义 build_systems，便于团队共享
- 示例片段：
{
"name": "Web - Build",
"cmd": ["npm", "run", "build"],
"working_dir": "${project_path}"
}
]
基本上就这些。Sublime 虽轻量，但通过命令行集成，完全能胜任现代前端工作流的触发中枢角色。关键在于把构建逻辑交给 npm script，让编辑器专注调用。
