UD5工具箱
Webpack 中 Loader 的执行顺序是怎样的？
在 Webpack 配置中，use 数组里的 Loader 按照从右到左（从下到上）的顺序依次执行。例如配置 use: ["style-loader", "css-loader", "babel-loader"]，执行顺序为 babel-loader 先处理，然后是 css-loader，最后是 style-loader。本工具为了直观展示数据流，采用从左到右的显示顺序——即第一个添加的 Loader 最先处理源代码。实际配置 Webpack 项目时请注意这一顺序差异，错误的 Loader 顺序可能导致转换失败或结果不符合预期。
本工具支持哪些预设 Loader 类型？
工具内置了六种预设 Loader，覆盖前端开发中最常见的文件转换场景。Babel 转换用于将 ES6+ 语法降级为 ES5 兼容写法；CSS 处理器模拟 CSS 文件的解析和格式化；JSON 处理用于验证和格式化 JSON 数据；代码压缩模拟移除空格和注释以减小文件体积；字符串包装在内容首尾添加自定义文本；自定义替换支持通过正则表达式进行灵活的文本替换。每种 Loader 均模拟了真实 Webpack Loader 的核心行为，帮助用户理解不同类型转换的工作原理。
Loader 和 Plugin 有什么区别？
Loader 和 Plugin 是 Webpack 的两个核心概念，职责完全不同。Loader 是文件级别的转换器，在模块加载时对单个文件进行预处理，比如将 TypeScript 转为 JavaScript、将 SASS 转为 CSS。Plugin 则作用于整个构建流程，可以执行更复杂的任务，如打包优化、资源管理、环境变量注入、生成 HTML 文件等。简单来说：Loader 处理文件内容，Plugin 扩展 Webpack 构建功能。在本工具中，我们重点模拟的是 Loader 的文件转换行为。
如何编写一个自定义 Loader？
自定义 Loader 本质上是一个导出函数的 Node.js 模块。该函数接收源文件内容作为第一个参数，返回转换后的结果。如果需要获取 Loader 的配置选项，可以通过 this.query 获取。对于异步操作，使用 this.async() 返回一个回调函数。编写自定义 Loader 时应遵循纯函数原则，避免副作用，确保相同的输入产生相同的输出。在本工具中，用户可以通过"自定义替换" Loader 体验类似的文本替换行为，理解 Loader 对输入数据进行处理并输出结果的基本模式。
转换出错时如何排查问题？
当 Loader 转换出错时，工具会在输出区域显示错误信息并停止后续 Loader 的执行。排查问题时，建议采取以下步骤：首先检查源代码格式是否正确（如 JSON 格式、JS 语法是否合法）；其次确认 Loader 类型与输入数据是否匹配（如不要对 CSS 代码使用 Babel 转换）；然后逐步移除 Loader，定位具体是哪个 Loader 导致的错误；最后利用步骤追踪功能查看每个 Loader 的输入输出变化。如果某个 Loader 处理失败，前面已成功执行的 Loader 结果仍然可以查看，方便对比分析。
Pitching Loader 是什么概念？
Loader 除了 normal 执行阶段外，还有一个 pitching 阶段。Pitching 阶段的执行方向与 normal 阶段相反——从左到右执行。在 pitching 阶段，每个 Loader 的 pitch 方法会被调用，如果某个 Loader 的 pitch 方法返回了值，后续 Loader 的 normal 执行会被跳过，直接将该值传递给前一个 Loader。Pitching Loader 常用于需要在数据处理前进行拦截的场景，如缓存检查、快捷返回等。本工具主要模拟 normal 阶段的执行过程，让开发者先掌握基础的 Loader 链式转换机制。
为什么选择从左到右显示数据流方向？
在真实 Webpack 配置中，Loader 的执行顺序是从右到左（或从下到上）。但为了符合人类从左到右的阅读习惯和数据流的直觉理解，本工具采用了从左到右的显示方向。这意味着第一个添加的 Loader 最先处理源代码，数据依次向右传递。这种显示方式让 Loader 链看起来更像一条从左到右的流水线，降低了理解难度。但开发者在实际项目中配置 Webpack 时，务必记住执行顺序是相反的。
转换步骤追踪中的耗时数据准确吗？
步骤追踪中的耗时数据反映了浏览器执行 Loader 转换函数的实际时间，但由于浏览器 JavaScript 引擎的性能特征、单次执行的微小波动等因素，该数据更适合作为相对参考而非绝对精确值。对于简单的字符串替换类 Loader，耗时通常在微秒级别，可能显示为 0ms；对于较复杂的 Babel 转换或大文件处理，耗时会更明显。建议通过多次执行取平均值来获得更可靠的性能参考。此外，不同设备和浏览器的执行速度会有差异。