跳到主要内容Webpack Loader 一览表 | 极客日志JavaScriptNode.js大前端
Webpack Loader 一览表
Webpack Loader 是构建工具中处理资源转换的核心机制。本文整理了常见文件扩展名对应的 Loader 推荐方案，以及基础与打包场景下的具体 Loader 功能列表，涵盖代码转译、样式处理、资源加载及特殊文件编译等功能，帮助开发者快速查阅配置。
链路追踪1 浏览 常见文件类型与 Loader 映射
| 扩展名 | 功能描述 | 推荐 Loader |
|---|
| .js | 返回模块导出 | babel-loader |
| .ts | 返回模块导出 | ts-loader |
| .coffee | 返回模块导出 | coffee-loader, coffee-redux-loader |
| .jsx | 返回模块导出 (React 组件) | jsx-loader, react-hot-loader!jsx-loader |
| .json, .json5 | 返回 JSON 值 | json-loader, json5-loader |
| .txt | 返回字符串值 | raw-loader |
| .css | 无返回值，向 DOM 添加样式副作用 | style-loader!css-loader, style-loader!css-loader!autoprefixer-loader |
| .less | 无返回值，向 DOM 添加样式副作用 | style-loader!css-loader!less-loader |
| .scss | 无返回值，向 DOM 添加样式副作用 | style-loader!css-loader!scss-loader |
| .styl | 无返回值，向 DOM 添加样式副作用 | style-loader!css-loader!stylus-loader |
| .png, .jpg, .jpeg, .gif, .svg | 返回图片 URL | file-loader, url-loader |
| .woff, .ttf | 返回字体 URL | file-loader, url-loader |
| .wav, .mp3 | 返回音频 URL | file-loader, url-loader |
| .mpeg, .mp4, .webm, .ogv | 返回视频 URL | file-loader |
| .html | 返回 HTML 字符串 | html-loader |
| .md, .markdown | 返回 HTML 字符串 | html-loader!markdown-loader |
| .jade | 返回模板函数 | jade-loader |
| .hbs, .handlebars | 返回模板函数 | handlebars-loader |
Loader 列表
基础功能
- json: 将文件加载为 JSON。
- hson: 将 Hanson 文件（JSON for Humans）加载为 JSON 对象。
- raw: 将文件加载为纯文本（utf-8）。
- val: 将代码当作模块执行，并将出口视为 JavaScript 代码。
- to-string: 将代码当作模块执行，转换输出字符串并导出。
打包相关
- file: 发出文件到输出文件夹，并返回相对路径。
- url: url-loader 的工作原理跟 file-loader 很像。但是如果文件小于一个阈值，它能返回一个 Data url。
- extract: 为提取文件准备 HTML 和 css 模块。
- worker: 这个 loader 给预备文件创建一个 webworker。
- shared-worker: 跟 worker 差不多，但是是为 shared worker 准备的。
- serviceworker: 跟 worker 差不多，但是是为 service worker 准备的。
相关免费在线工具
- Keycode 信息
查找任何按下的键的javascript键代码、代码、位置和修饰符。 在线工具，Keycode 信息在线工具，online
- Escape 与 Native 编解码
JavaScript 字符串转义/反转义；Java 风格 \uXXXX（Native2Ascii）编码与解码。 在线工具，Escape 与 Native 编解码在线工具，online
- JavaScript / HTML 格式化
使用 Prettier 在浏览器内格式化 JavaScript 或 HTML 片段。 在线工具，JavaScript / HTML 格式化在线工具，online
- JavaScript 压缩与混淆
Terser 压缩、变量名混淆，或 javascript-obfuscator 高强度混淆（体积会增大）。 在线工具，JavaScript 压缩与混淆在线工具，online
- Base64 字符串编码/解码
将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online
- Base64 文件转换器
将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online
