Webpack5入门到原理17：Loader 原理

loader 概念

帮助 webpack 将不同类型的文件转换为 webpack 可识别的模块。

loader 执行顺序

分类

  • pre： 前置 loader
  • normal： 普通 loader
  • inline： 内联 loader
  • post： 后置 loader

执行顺序

  • 4 类 loader 的执行优级为：pre > normal > inline > post 。
  • 相同优先级的 loader 执行顺序为：从右到左，从下到上。

例如：

// 此时loader执行顺序：loader3 - loader2 - loader1
module: {rules: [{test: /\.js$/,loader: "loader1",},{test: /\.js$/,loader: "loader2",},{test: /\.js$/,loader: "loader3",},],
},
// 此时loader执行顺序：loader1 - loader2 - loader3
module: {rules: [{enforce: "pre",test: /\.js$/,loader: "loader1",},{// 没有enforce就是normaltest: /\.js$/,loader: "loader2",},{enforce: "post",test: /\.js$/,loader: "loader3",},],
},

使用 loader 的方式

  • 配置方式：在 webpack.config.js 文件中指定 loader。（pre、normal、post loader）
  • 内联方式：在每个 import 语句中显式指定 loader。（inline loader）

inline loader

用法：import Styles from 'style-loader!css-loader?modules!./styles.css';

含义：

使用 css-loader 和 style-loader 处理 styles.css 文件

通过 ! 将资源中的 loader 分开

inline loader 可以通过添加不同前缀，跳过其他类型 loader。

! 跳过 normal loader。

import Styles from '!style-loader!css-loader?modules!./styles.css';

-! 跳过 pre 和 normal loader。

import Styles from '-!style-loader!css-loader?modules!./styles.css';

!! 跳过 pre、 normal 和 post loader。

import Styles from '!!style-loader!css-loader?modules!./styles.css';

开发一个 loader

1. 最简单的 loader

// loaders/loader1.js
module.exports = function loader1(content) {console.log("hello loader");return content;
};

它接受要处理的源码作为参数，输出转换后的 js 代码。

2. loader 接受的参数

  • content 源文件的内容
  • map SourceMap 数据
  • meta 数据，可以是任何内容

loader 分类

1. 同步 loader

module.exports = function (content, map, meta) {return content;
};

this.callback 方法则更灵活，因为它允许传递多个参数，而不仅仅是 content。

module.exports = function (content, map, meta) {// 传递map，让source-map不中断// 传递meta，让下一个loader接收到其他参数this.callback(null, content, map, meta);return; // 当调用 callback() 函数时，总是返回 undefined
};

2. 异步 loader

module.exports = function (content, map, meta) {const callback = this.async();// 进行异步操作setTimeout(() => {callback(null, result, map, meta);}, 1000);
};

由于同步计算过于耗时，在 Node.js 这样的单线程环境下进行此操作并不是好的方案，我们建议尽可能地使你的 loader 异步化。但如果计算量很小，同步 loader 也是可以的。

3. Raw Loader

默认情况下，资源文件会被转化为 UTF-8 字符串，然后传给 loader。通过设置 raw 为 true，loader 可以接收原始的 Buffer。

module.exports = function (content) {// content是一个Buffer数据return content;
};
module.exports.raw = true; // 开启 Raw Loader

4. Pitching Loader

module.exports = function (content) {return content;
};
module.exports.pitch = function (remainingRequest, precedingRequest, data) {console.log("do somethings");
};

webpack 会先从左到右执行 loader 链中的每个 loader 上的 pitch 方法（如果有），然后再从右到左执行 loader 链中的每个 loader 上的普通 loader 方法。

在这个过程中如果任何 pitch 有返回值，则 loader 链被阻断。webpack 会跳过后面所有的的 pitch 和 loader，直接进入上一个 loader 。

loader API

方法名含义用法
this.async异步回调 loader。返回 this.callbackconst callback = this.async()
this.callback可以同步或者异步调用的并返回多个结果的函数this.callback(err, content, sourceMap?, meta?)
this.getOptions(schema)获取 loader 的 optionsthis.getOptions(schema)
this.emitFile产生一个文件this.emitFile(name, content, sourceMap)
this.utils.contextify返回一个相对路径this.utils.contextify(context, request)
this.utils.absolutify返回一个绝对路径this.utils.absolutify(context, request)

更多文档，请查阅 webpack 官方 loader api 文档 

手写 clean-log-loader

作用：用来清理 js 代码中的console.log

// loaders/clean-log-loader.js
module.exports = function cleanLogLoader(content) {// 将console.log替换为空return content.replace(/console\.log\(.*\);?/g, "");
};

手写 banner-loader

作用：给 js 代码添加文本注释

loaders/banner-loader/index.js

const schema = require("./schema.json");module.exports = function (content) {// 获取loader的options，同时对options内容进行校验// schema是options的校验规则（符合 JSON schema 规则）const options = this.getOptions(schema);const prefix = `/** Author: ${options.author}*/`;return `${prefix} \n ${content}`;
};

loaders/banner-loader/schema.json

{"type": "object","properties": {"author": {"type": "string"}},"additionalProperties": false
}

手写 babel-loader

作用：编译 js 代码，将 ES6+语法编译成 ES5-语法。

下载依赖

npm i @babel/core @babel/preset-env -D

loaders/babel-loader/index.js

const schema = require("./schema.json");
const babel = require("@babel/core");module.exports = function (content) {const options = this.getOptions(schema);// 使用异步loaderconst callback = this.async();// 使用babel对js代码进行编译babel.transform(content, options, function (err, result) {callback(err, result.code);});
};

loaders/banner-loader/schema.json

{"type": "object","properties": {"presets": {"type": "array"}},"additionalProperties": true
}

手写 file-loader

作用：将文件原封不动输出出去

下载包

npm i loader-utils -D

loaders/file-loader.js

const loaderUtils = require("loader-utils");function fileLoader(content) {// 根据文件内容生产一个新的文件名称const filename = loaderUtils.interpolateName(this, "[hash].[ext]", {content,});// 输出文件this.emitFile(filename, content);// 暴露出去，给js引用。// 记得加上''return `export default '${filename}'`;
}// loader 解决的是二进制的内容
// 图片是 Buffer 数据
fileLoader.raw = true;module.exports = fileLoader;

loader 配置

{test: /\.(png|jpe?g|gif)$/,loader: "./loaders/file-loader.js",type: "javascript/auto", // 解决图片重复打包问题
},

手写 style-loader

作用：动态创建 style 标签，插入 js 中的样式代码，使样式生效。

loaders/style-loader.js

const styleLoader = () => {};styleLoader.pitch = function (remainingRequest) {/*remainingRequest: C:\Users\86176\Desktop\source\node_modules\css-loader\dist\cjs.js!C:\Users\86176\Desktop\source\src\css\index.css这里是inline loader用法，代表后面还有一个css-loader等待处理最终我们需要将remainingRequest中的路径转化成相对路径，webpack才能处理希望得到：../../node_modules/css-loader/dist/cjs.js!./index.css所以：需要将绝对路径转化成相对路径要求：1. 必须是相对路径2. 相对路径必须以 ./ 或 ../ 开头3. 相对路径的路径分隔符必须是 / ，不能是 \*/const relativeRequest = remainingRequest.split("!").map((part) => {// 将路径转化为相对路径const relativePath = this.utils.contextify(this.context, part);return relativePath;}).join("!");/*!!${relativeRequest} relativeRequest：../../node_modules/css-loader/dist/cjs.js!./index.cssrelativeRequest是inline loader用法，代表要处理的index.css资源, 使用css-loader处理!!代表禁用所有配置的loader，只使用inline loader。（也就是外面我们style-loader和css-loader）,它们被禁用了，只是用我们指定的inline loader，也就是css-loaderimport style from "!!${relativeRequest}"引入css-loader处理后的css文件为什么需要css-loader处理css文件，不是我们直接读取css文件使用呢？因为可能存在@import导入css语法，这些语法就要通过css-loader解析才能变成一个css文件，否则我们引入的css资源会缺少const styleEl = document.createElement('style')动态创建style标签styleEl.innerHTML = style将style标签内容设置为处理后的css代码document.head.appendChild(styleEl)添加到head中生效*/const script = `import style from "!!${relativeRequest}"const styleEl = document.createElement('style')styleEl.innerHTML = styledocument.head.appendChild(styleEl)`;// style-loader是第一个loader, 由于return导致熔断，所以其他loader不执行了（不管是normal还是pitch）return script;
};module.exports = styleLoader;

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/638986.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

【ARM 嵌入式 编译系列 2.6 -- GCC 编译时间统计参数 -ftime-report -Q 】

【ARM 嵌入式 编译系列 2.6 -- GCC 编译时间统计参数 -ftime-report -Q 】

请阅读【嵌入式开发学习必备专栏 之 ARM GCC 编译专栏】 文章目录 GCC 编译时间统计 GCC 编译时间统计 如果你想要统计 GCC 编译过程中各个阶段的时间，可以使用 GCC 的 -ftime-report 选项。这个选项可以让编译器在编译结束后报告每个编译阶段所花费的时间。要使用…
阅读更多...
Linux fsck命令教程：如何检查和修复你的文件系统(附实例详解和注意事项)

Linux fsck命令教程：如何检查和修复你的文件系统(附实例详解和注意事项)

Linux fsck命令介绍 fsck，全称File System Consistency Check，主要用于检查和修复Linux文件系统的不一致和错误。该工具用于解决潜在的文件系统问题。fsck可以为你提供检查和修复一切文件系统中的问题的功能，包括一些潜在的磁盘错误等。 Li…
阅读更多...
网络通信(Socket/TCP/UDP)

网络通信(Socket/TCP/UDP)

一、Socket 1.概念： Socket(又叫套接字)是通信的基石，是支持TCP/IP协议的网络通信的基本操作单元。它是网络通信过程中端点的抽象表示，包含进行网络通信必须的五种信息：连接协议，客户端的IP地址，客户端的端口，服务器的IP地址，服务器的端口。 一个Socket是一对IP地址…
阅读更多...
笔试面试题——二叉树进阶（一）

笔试面试题——二叉树进阶（一）

📘北尘_：个人主页 🌎个人专栏:《Linux操作系统》《经典算法试题 》《C》 《数据结构与算法》 ☀️走在路上，不忘来时的初心 文章目录 一、根据二叉树创建字符串1、题目讲解2、思路讲解3、代码实现 二、二叉树的分层遍历1、题目讲…
阅读更多...
【C语言基础考研向】11 gets函数与puts函数及str系列字符串操作函数

【C语言基础考研向】11 gets函数与puts函数及str系列字符串操作函数

1.gets函数与puts函数 gets函数类似于scanf函数，用于读取标准输入．前面我们已经知道scanf函数在读取字符串时遇到空格就认为读取结束，所以当输入的字符串存在空格时，我们需要使用gets 函数进行读取. gets函数的格式如下: char *…
阅读更多...
大数据导论（4）---大数据应用

大数据导论（4）---大数据应用

文章目录 1. 在互联网中的应用1.1 推荐系统1.2 长尾理论1.3 推荐方法与模型1.4 推荐系统应用 2. 在其他领域的应用2.1 企业营销2.2 智慧交通 1. 在互联网中的应用 1.1 推荐系统 1. 推荐系统产生：  (1) 互联网的飞速发展使我们进入了信息过载的时代，搜索…
阅读更多...
【赠书第17期】Excel高效办公：文秘与行政办公（AI版）

【赠书第17期】Excel高效办公：文秘与行政办公（AI版）

文章目录 前言 1 了解Excel的强大功能和工具 2 提升Excel技能的方法 3 结合AI技术提升Excel应用 4 注意事项 5 推荐图书 6 粉丝福利 前言 随着人工智能（AI）技术的快速发展，我们的工作方式也在发生深刻变革。其中，Excel 作…
阅读更多...
使用cmake进行完成开发实践

使用cmake进行完成开发实践

根据这个UML图进行cmake的实践 首先按照使用vscode在wsl2中配置clangd环境-CSDN博客的内容先创建出cmake项目。 之后在项目目录中创建include和src目录。 根据UML图，首先要完成Gun类的实现。分别在include，src目录下创建头文件和源文件，写入…
阅读更多...
vue组件扩展

vue组件扩展

Vue中如何扩展一个组件 mixins、extends、slots、composition api 1、mixins 值可以是一个混合对象数组,混合实例可以包含选项,将在extend将相同的选项合并 mixins代码: var mixin{data:{mixinData:我是mixin的data},created:function(){console.log(这是mixin的created);},…
阅读更多...
NAT44-ED features及节点图

NAT44-ED features及节点图

VPP配置SNAT，内网接口GigabitEthernet2/0/0，外网接口GigabitEthernet3/0/0，NAT之后的地址为GigabitEthernet3/0/0接口的地址。 vpp# set interface state GigabitEthernet2/0/0 up vpp# set interface state GigabitEthernet3/0/0 up vpp# v…
阅读更多...
上位机图像处理和嵌入式模块部署（qt图像处理）

上位机图像处理和嵌入式模块部署（qt图像处理）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing 163.com】 很多人一想到图像处理，本能的第一反应就是opencv，这也没有错。但是呢，这里面还是有一个问题的，不知…
阅读更多...
Leetcode刷题笔记题解（C++）：LCR 174. 寻找二叉搜索树中的目标节点

Leetcode刷题笔记题解（C++）：LCR 174. 寻找二叉搜索树中的目标节点

思路：二叉搜索树的中序遍历是有序的从大到小的，故得出中序遍历的结果，即要第cnt大的数为倒数第cnt的数 /*** Definition for a binary tree node.* struct TreeNode {* int val;* TreeNode *left;* TreeNode *right;* TreeN…
阅读更多...
JUC并发编程-集合不安全情况以及Callable线程创建方式

JUC并发编程-集合不安全情况以及Callable线程创建方式

6. 集合不安全 1&#xff09;List 不安全 //java.util.ConcurrentModificationException 并发修改异常&#xff01; public class ListTest {public static void main(String[] args) {List<Object> arrayList new ArrayList<>();for(int i1;i<30;i){new Thr…
阅读更多...
​WordPress顶部管理工具栏怎么添加一二级自定义菜单？

​WordPress顶部管理工具栏怎么添加一二级自定义菜单？

默认情况下&#xff0c;WordPress前端和后台页面顶部都有一个“管理工具栏”&#xff0c;左侧一般就是站点名称、评论、新建&#xff0c;右侧就是您好&#xff0c;用户名称和头像。那么我们是否可以在这个管理工具栏中添加一些一二级自定义菜单呢&#xff1f; 其实&#xff0c…
阅读更多...
力扣746. 使用最小花费爬楼梯

力扣746. 使用最小花费爬楼梯

动态规划 思路&#xff1a; 定义 dp[i] 为到达下标 i 层的最小花费&#xff1b;则状态转移方程为&#xff1a; 第 i 层可以从第 i - 1 层爬一层或者第 i - 2 层爬两层到达&#xff1b;则 dp[i] std::min(dp[i - 1] cost[i - 1], dp[i - 2] cost[i - 2])初始状态&#xff1a…
阅读更多...
编程笔记 html5cssjs 050 CSS表格2-1

编程笔记 html5cssjs 050 CSS表格2-1

编程笔记 html5&css&js 050 CSS表格2-1 一、表格边框二、全宽表格三、合并表格边框四、表格宽度和高度五、水平对齐六、垂直对齐七、表格内边距八、可悬停表格九、条状表格十、表格颜色十一、响应式表格十二、CSS 表格属性十三、练习小结 使用 CSS 可以极大地改善 HTML…
阅读更多...
SpringSecurity+JWT前后端分离架构登录认证

SpringSecurity+JWT前后端分离架构登录认证

目录 1. 数据库设计 2. 代码设计 登录认证过滤器 认证成功处理器AuthenticationSuccessHandler 认证失败处理器AuthenticationFailureHandler AuthenticationEntryPoint配置 AccessDeniedHandler配置 UserDetailsService配置 Token校验过滤器 登录认证过滤器接口配置…
阅读更多...
应用层—HTTPS详解（对称加密、非对称加密、密钥……）

应用层—HTTPS详解（对称加密、非对称加密、密钥……）

文章目录 HTTPS什么是 HTTPSHTTPS 如何加密HTTPS 的工作过程对称加密非对称加密 HTTPS 什么是 HTTPS HTTPS 也是一个应用层的协议。是在 HTTP 协议的基础上引入的一个加密层。 由来&#xff1a;HTTP 协议内容都是按照文本的方式明纹传输&#xff0c;这就导致在传输过程中出现…
阅读更多...
AndroidStudio 无法打开 arb 文件

AndroidStudio 无法打开 arb 文件

问题描述 在做Flutter国际化的时候&#xff0c;AndroidStudio突然无法打开arb文件。 原因分析&#xff1a; Android Studio 默认可能并不支持直接打开.arb文件&#xff0c;因为.arb文件通常用于Flutter的国际化资源。为了在Android Studio中编辑和查看.arb文件&#xff0c;您…
阅读更多...
Springboot+vue的校园疫情防控系统（有报告），Javaee项目，springboot vue前后端分离项目。

Springboot+vue的校园疫情防控系统（有报告），Javaee项目，springboot vue前后端分离项目。

演示视频&#xff1a; Springbootvue的校园疫情防控系统&#xff08;有报告&#xff09;&#xff0c;Javaee项目&#xff0c;springboot vue前后端分离项目。 项目介绍&#xff1a; 本文设计了一个基于Springbootvue的前后端分离的校园疫情防控系统&#xff0c;采用M&#xff…
阅读更多...
最新文章

Copyright @ 2022~2023