跳到主要内容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: 将代码当作模块执行,转换输出字符串并导出。
imports: 引入内容到模块。exports: 从模块导出内容。expose: 将模块出口暴露给全局上下文。script: 在全局上下文执行 JavaScript 文件(类似 script 标签),requires 不被解析。apply: 执行导出的可带参数的 JavaScript 函数,输出其返回值。callback: 分析 JS,调用指定函数(在 webpack 上下文中执行)并用结果替换它们。if-loader: 预处理程序,为 webpack 模块打捆。支持 if 指令,像 C 语言的 #ifdef。source-map: 从模块中提取 sourceMappingURL 注释,并提供给 webpack。checksum: 计算文件的校验和。null: 发出空模块。cowsay: 发射一个带 cowsay 头的模块。dsv: 加载 csv、tsv 文件。glsl: 加载 glsl 文件,支持 glsl-chunks。render-placement: 添加 React,为你渲染组件(大多数情况下不实用)。xml: 将一个 xml 文件加载为 JSON。svg-react: 将 SVG 文件加载为 JSX 文件,React.createClass 声明类。svg-url: 将 SVG 文件加载为 utf-8 编码数据:URI string。svg-as-symbol: 把 svg 源文件根目录下的元素内容包裹在 symbol 元素里,返回结果标记。base64: 加载文件的内容为 base64 字符串。ng-annotate: 给 angular 应用的依赖注入编号的 Loader。node: 加载用 node-gyp 生成的.node 文件。required: 加载整个目录树。加载 js,css 和它们里面的其它东西。icons: 从 svg 文件生成字体。block-loader: 基于内容 start/end 分隔符,只重写文件的一部分的通用 Loader。bundler-configuration: 把配置文件加到打包结果文件中的一个工具。console: 在控制台打印解析 webpack required 的 resolved。solc: 编译 Solidity 代码 (.sol),返回带有应用程序二进制接口和字节编码的 js 对象,为部署到 Ethereum 作准备。web3: 部署 Ethereum 虚拟机字节码,返回部署智能协议的 ready-to-use 的 js 实例,还返回 Web3 初始化对象。打包相关
- 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