UD5工具箱
了解工具界面布局
打开 Webpack Loader 测试器页面后，界面分为三个主要区域：顶部是 Loader 转换链配置区，中部是源代码输入和转换输出的双栏编辑区，底部是转换步骤追踪表格。左侧区域可以添加和管理 Loader，右侧区域展示数据流方向和执行结果。熟悉各区域的功能定位后，即可开始配置和测试。
选择并添加 Loader
点击转换链区域的"添加 Loader"按钮，从下拉菜单中选择需要的 Loader 类型。工具提供六种预设：Babel 转换（将 ES6 语法降级为 ES5 兼容写法）、CSS 处理器（解析和转换 CSS 样式）、JSON 处理（格式化和验证 JSON 数据）、代码压缩（移除多余空格和注释）、字符串包装（在内容首尾添加自定义文本）和自定义替换（通过正则表达式进行文本替换）。可以根据需要添加多个 Loader，它们将按顺序组成转换链。
输入源代码内容
在"源代码输入"区域粘贴或编写需要转换的代码。可以使用工具提供的"ES6 示例"或"CSS 示例"按钮快速加载预置代码进行体验。支持 JavaScript、CSS、JSON 和任意文本格式。建议根据已添加的 Loader 类型选择匹配的源代码——例如添加了 Babel 转换 Loader 时，输入包含 ES6 语法的 JavaScript 代码效果最佳；添加 CSS 处理器时则输入 CSS 代码。
执行转换并查看结果
点击"执行转换"按钮（或使用快捷键 Ctrl + Enter），工具将按照 Loader 链的顺序依次执行转换。源代码会依次经过每个 Loader 处理，最终结果显示在右侧的"转换输出"区域。输出区域提供复制和下载按钮，方便将转换结果导出。观察转换前后的代码变化，可以直观理解每个 Loader 对代码做了哪些处理。
分析转换步骤追踪
在页面底部的"转换步骤追踪"表格中，查看每个 Loader 的详细处理信息。表格列出了步骤序号、Loader 名称、输入大小、输出大小、耗时和详情入口。通过对比每个步骤的输入输出大小，可以了解数据体积的变化；通过耗时数据可以评估各 Loader 的性能表现。点击"详情"按钮可以展开查看该步骤的完整输入和输出文本，进行逐字对比分析。
保存 Loader 配置
当调试出满意的 Loader 组合后，点击页面中的"保存配置"按钮，将当前的 Loader 链配置保存到浏览器本地存储。保存成功后，下次访问工具时可以直接加载之前保存的配置，无需重新搭建。如果需要调整，也可以修改后重新保存。取消按钮可清除未保存的修改。