UD5工具箱
Loader 链式转换模拟
工具的核心功能是模拟 Webpack Loader 的链式转换机制。用户可以从预设的六种 Loader 中选择并添加到转换链中，构建自定义的转换流水线。每个 Loader 按照从左到右的顺序依次执行，前一个 Loader 的输出自动成为下一个 Loader 的输入，完整还原 Webpack 中 Loader 链的数据传递方式。这种链式设计让开发者能够直观理解多 Loader 协作时的数据流动过程。
转换链可视化展示
工具采用直观的可视化方式展示 Loader 转换链。数据流方向标注为左到右，每个 Loader 节点清晰展示在转换链中。用户可以清楚地看到源代码经过哪些 Loader 处理，以及每个处理阶段的数据变化。这种可视化呈现方式比阅读 webpack.config.js 中的配置数组更加直观，特别适合初学者建立对 Loader 执行流程的认知。
六种预设 Loader 类型
内置覆盖前端开发常见场景的六种预设 Loader：Babel 转换（ES6 语法降级为 ES5）、CSS 处理器（解析和转换 CSS 代码）、JSON 处理（解析和格式化 JSON 数据）、代码压缩（去除空格和注释缩小体积）、字符串包装（添加自定义前后缀）以及自定义替换（支持正则表达式的灵活文本替换）。每种 Loader 均模拟了真实 Webpack Loader 的核心行为，让用户无需编写配置即可体验不同类型的文件转换。
多格式源代码输入
支持多种源代码格式的输入，包括 JavaScript（ES6+ 语法）、CSS 样式代码、JSON 数据以及任意纯文本内容。工具提供预置的示例代码（ES6 示例和 CSS 示例），用户可以快速加载示例进行体验，也可以粘贴自己的代码进行测试。这种灵活的输入方式让工具不仅适用于 JS 开发者，也能满足 CSS 和数据处理等不同场景的需求。
转换步骤追踪与详情
每次执行转换后，工具会生成详细的步骤追踪表格，记录每个 Loader 的处理信息：Loader 名称、输入数据大小、输出数据大小、执行耗时（毫秒）以及可展开的详情查看。用户可以精确了解每个 Loader 对数据做了什么处理、数据体积如何变化、处理耗时是多少。步骤详情还提供输入和输出的完整文本对比，方便深入分析每个 Loader 的转换行为。
Loader 配置保存与管理
提供 Loader 配置保存功能，用户可以将当前的 Loader 链配置保存到本地存储中。保存后，下次访问工具时可以快速加载之前保存的配置，无需重新从头搭建 Loader 链。这一功能特别适合需要反复测试同一配置组合的开发者，以及希望积累不同 Loader 组合方案的用户，提升了工作效率和配置复用性。
转换结果复制与下载
转换完成后，输出区域提供一键复制和下载功能。用户可以快速将转换后的代码复制到剪贴板，或下载为文件保存到本地。结合步骤追踪信息，用户可以全面了解转换过程并获取最终产物，方便将测试结果应用到实际项目中或与其他开发者分享。