无需登录 数据私有 本地保存

Webpack Loader 测试器 - 模拟文件转换过程

开发工具 编译工具 Loader Webpack 测试 转换
12
0
0
0

Webpack Loader 测试器

模拟文件转换流水线，直观理解 Loader 链工作机制
Loader 转换链 数据流方向：左→右，依次执行
👈 点击右侧按钮添加 Loader，构建转换流水线
源代码输入 支持 JS / CSS / JSON / 任意文本
转换输出
点击 "执行转换" 查看结果
或按 Ctrl + Enter
转换步骤追踪
# Loader 输入大小 输出大小 耗时 详情
尚未执行转换，请配置 Loader 链后点击"执行转换"
常见问题 & 知识点

Webpack 中，use 数组里的 Loader 从右到左（从下到上）依次执行。本工具为了直观展示数据流，采用从左到右的顺序——即第一个 Loader 最先处理源代码，输出传递给下一个 Loader，形成流水线。实际配置时请注意顺序差异。

典型组合包括：
• style-loader + css-loader：处理 CSS 并注入到 DOM
• babel-loader + eslint-loader：先检查代码规范，再转译
• url-loader + image-webpack-loader：先压缩图片再转为 base64
• 多个自定义 Loader 串联可实现复杂的数据处理流水线。

Loader 是文件级别的转换器，在模块加载时对单个文件进行预处理（如转译、压缩）。Plugin 则作用于整个构建流程，可以执行更复杂的任务（如打包优化、资源管理、注入环境变量）。简单说：Loader 处理文件内容，Plugin 扩展 Webpack 功能。

自定义 Loader 是一个导出函数的 Node.js 模块，接收源文件内容作为输入，返回转换后的结果。函数中可使用 this.callback() 返回多个值，或使用 this.async() 处理异步操作。Loader 函数必须纯函数化，避免副作用。

当 Loader 遇到无法处理的文件或转换失败时，应抛出有意义的错误信息。Webpack 会捕获这些错误并终止构建。在本工具中，如果某个 Loader 处理失败（如 JSON 格式错误），会停止后续 Loader 的执行并在输出区显示错误详情，方便定位问题。

Loader 除了 normal 执行阶段，还有一个 pitching 阶段。Pitching 阶段从左到右执行（与 normal 阶段相反），允许 Loader 在文件被处理前拦截请求。如果某个 Loader 的 pitch 方法返回了值，后续 Loader 的 normal 执行会被跳过。本工具主要模拟 normal 阶段。
🔧 相关工具