【webpack】自定义loader

📝个人主页:爱吃炫迈
💌系列专栏:前端工程化
🧑‍💻座右铭:道阻且长,行则将至💗

文章目录

  • loader
  • loader引入方式
  • loader传入/接收参数
    • 传入参数
    • 接收参数
  • loader返回值
    • return source
    • this.callback()
  • 同步/异步loader
    • 使用async和await进行处理
    • 使用loader提供的this.async进行处理
  • loader单一功能原则
  • loader实战
    • style-loader
    • css-loader
    • less-loader


loader

一个loader就是一个Node.js模块,这个模块需要导出一个函数,这个导出函数的工作就是获得处理前的源内容,对源内容进行处理后,返回处理后的内容

实现一个替换文件中姓名的loader。例如将“小张”替换成“小李”

name.js

export const name = "小张"

index.js

import { name } from "./name.js"function showInfo() {console.log("name")
}showInfo()

运行代码输出:

小张

现在我们希望将小张替换成小李:

  1. 创建replace-loader

myLoaders/replace-loader.js

module.exports = function(source) {// source为compiler传递给loader的一个文件的源内容const cotent = source.replace("小张", "小李")// 该处理函数需要返回处理后的内容return cotent
}
  1. 使用loader

webpack.config.js

const path = require("path")module.export = {mode: "production",entry: "./src/index.js",output: {path: path.resolve(__dirname, "dist"),filename: "[name].js",},module: {rules: [{test: /\.js$/,use:"./myLoaders/replace-loader.js"// 本地loader, 要填写本地的路径}]},
}

打包后我们就会发现实现我们的想要的功能啦~~~

因为我们使用的是本地的loader,因此需要填写本地的路径。loader的引入主要有以下几种方式:

loader引入方式

  1. 如果是npm包安装的loader,那么直接写loader名称即可
{test: /\.js$/,use:'babel-loader'
}
  1. 如果是本地自定义的loader,那么需要写本地loader的地址
{test: /\.js$/,use: path.resolve(__dirname, "./myLoaders/replace-loader")
}

如上面的代码,我们每使用一个自定义的loader,都必须使用 path 模块来解析自定义loader的路径问题,这就会导致代码变得难以维护。那可不可以像引用第三方的loader一样,只写loader 名呢?我们可以使用 resolveLoader 来解决这个问题。

  1. 如果是本地定义的loader,然后也想直接使用loader名称,那么可以取个别名
module.exports = {resolveLoader: {// 取个别名alias: {"replace-loader": path.resolve(__dirname,"myLoaders/replace-loader")}},module: {rules: [{test: /\.js$/,use: 'replace-loader',}]}
}
  1. 如果你不想取别名,还想直接使用loader,那么就定义一下loader的查找位置,loader会默认先从node_modules中查找。如果我们希望它也能够到本地查找,那么就定义一下查找位置。

ResolveLoader 用于配置 webpack 如何寻找 loader,默认情况下只会去 node_modules 目录下寻找,为了让 webpack 去加载自定义的 loader,我们需要修改 resolveLoader.modules

比如我们自定义的loader 放在 ./myLoaders 目录下,则需要如下配置:

module.exports = {resolveLoader: {// 去哪些目录下寻找 loader ,有先后顺序之分// 如下配置中,查找顺序是:先在 node_modules 目录下寻找,若找不到,再到 ./myLoaders 目录下寻找modules: ["node_modules", "./myLoaders"],},module: {rules: [{test: /\.js$/,use: 'replace-loader',}]}
}

loader传入/接收参数

传入参数

我们上述代码的功能是将“小张”替换成“小李”,假如我们希望将“小张”替换成“小王”,换成“小周”,那么我们难道每次都在loader中修改吗?这肯定不会,因此,我们需要支持配置参数。loader支持通过options进行配置:

{test: /\.js$/,use: ["replace-loader",{loader: "replace-loader",options: {name: "小李",},},],
}

接收参数

  1. this.query

webpack官方文档如何让编写一个loader中说明了loader只接收一个参数,这个参数是读取的文件内容(一个包含资源文件内容的字符串)。webpack会把所有的信息都放到上下文this中,我们可以通过this.queryAPI来获取webpack.config.js中配置的options对象:

module.exports = function (source) {// this.query 获取到的就是在webpack.config.js配置中配置的 options 对象// 通过 this.query API 获取在配置中配置的 name return source.replace("小张", this.query.name);
};
  1. loader-utils

虽然我们可以通过this.query来进行获取,但是webpack更加推荐使用loader-utils来进行操作,它提供了许多有用的工具,最常用的一种工具是获取传递给loader的选项。

  • 安装
npm i loader-utils -D
  • 使用
const { getOptions } = require('loader-utils')
module.exports = function(source)  {// const options = this.getOptions();let { name } = getOptions(this);const content = source.replace("小张",name);return content;
}

loader返回值

loader 的原理就是将输入的源内容进行处理后返回,loader的返回值涉及到一个还是多个返回值。有些情况下比如我们需要返回sourceMap,那么就需要多个返回值。 如果需要返回一个返回值,可以直接使用return。

return source

如果只有一个返回值,可以使用return返回,这种方式返回的是源内容转换后的内容

const { getOptions } = require('loader-utils')
module.exports = function (source) {// 处理sourcelet { name } = getOptions(this)const content = source.replace("小张", name)return content // 返回一个值
}

this.callback()

如果有多个值需要返回,需要使用loader本身提供的回调函数callback。这种方式可以返回除了处理内容之外的其他信息。

const { getOptions } = require('loader-utils')
const { SourceMap } = require('module')module.exports = function (source) {// 处理 sourcelet { name } = getOptions(this)const content = source.replace("小张", name);// 使用 this.callback 返回内容this.callback(null, content,SourceMap);
};

callback支持的参数如下:

callback({// 报错error: Error | Null,// 转换后的内容content: String | Buffer,// 转换后的内容得出的sourceMapsourceMap?: SourceMap,// astabstractSyntaxTree?: AST 
})

注意:

在Webpack中,每个loader都可以返回一个包含多个属性的对象。

  • content是该对象的一个属性,用于指定经过loader处理后生成的代码。
  • sourceMap是另一个属性,用于指定生成的代码的源映射表。

因此,content和sourceMap的区别在于,content是经过loader处理后生成的代码本身,而sourceMap则是一个包含了生成的代码和原始代码的映射关系的JSON对象。

事实上,如果只有一个返回值,我们也可以直接使用this.callback。

this.callback(null,content)

同步/异步loader

loader有同步异步之分,上面介绍的loader都是同步loader,因为它们的转换流程都是同步的,即转换完成后再返回结果。但在某些场景下转换内容需要异步才能完成,例如需要通过网络请求才能得到结果,如果使用同步的方式,网络请求就会阻塞整个构建过程,导致构建变得十分缓慢。

使用async和await进行处理

module.exports = async function(source)  {let {name,age} = getOptions(this);// 这里其实不是异步的,只是作为示例,可以这样处理const content =  await source.replace("小张",name);return content;
}

使用loader提供的this.async进行处理

当转换内容需要异步才能完成时,我们可以使用webpack为loader提供的this.async将这个loader变成是一个异步loader:

const { getOptions } = require('loader-utils')
const { SourceMap } = require('module')module.exports = function (source) {let { name } = getOptions(this);// 使用 setTimeout 模拟异步过程setTimeout(() => {const content = source.replace("小张", name);// 通过 callback 返回执行异步后的结果this.async(null, content,SourceMap);}, 3000);
};

loader单一功能原则

在webpack官网的如何编写一个loader中提到,webpack的loader编写最寻单一功能原则,也就是loader只能实现一个功能。比如less-loader用来处理less文件,css-loader用来处理css文件,style-loader用来将样式插入到style标签中,这些功能虽然可以放到一个loader中实现,但是为了确保loader的功能纯粹,能够让不同的loader各司其职,同时进行功能组合,最好每个loader只负责一个功能。

loader实战

style-loader

style-loader做的事情其实很简单,就是把序列化后的css内容放到style标签中,然后将style标签插入到HTML页面的head标签中

module.exports = function(source) {return `const styleTag = document.createElement('style');styleTag.innerHTML = ${source};document.head.appendChild(styleTag);`
}

css-loader

css-loader 做的事情也十分的简单,将 less-loader 转换后的 css 内容进行序列化

module.exports = function(source) {return JSON.stringify(source);
}

less-loader

less-loader 做的事情就是使用 less 模块,将 less 转换成 css

// 使用 less 模块处理 less 语法
const less = require('less');
module.exports = function(source) {less.render(source, (error, output) => {let { css } = output;this.callback(error, css)})
}

参考文章:
由浅及深实现一个自定义loader

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

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

相关文章

竞赛项目 深度学习疲劳驾驶检测 opencv python

文章目录 0 前言1 课题背景2 实现目标3 当前市面上疲劳驾驶检测的方法4 相关数据集5 基于头部姿态的驾驶疲劳检测5.1 如何确定疲劳状态5.2 算法步骤5.3 打瞌睡判断 6 基于CNN与SVM的疲劳检测方法6.1 网络结构6.2 疲劳图像分类训练6.3 训练结果 7 最后 0 前言 🔥 优…

SpringBoot在线失物招领系统

一个基于SpringBootSemanticUI的pc Web在线失物招领系统 http://localhost:8080/swzl/index 主页 http://localhost:8080/swzl/login 登录页 用户表user admin字段为true是管理员 false用户 springboot2.3 springmvc mybatis html ajax idea 或eclipse maven mys…

linux 下安装部署flask项目

FlaskDemo 命名为test.py # codingutf-8 from flask import Flaskapp Flask(__name__)app.route("/") def index():return "test"if __name__ __main__:app.debug True# 这里host一定要写0.0.0.0 写127.0.0.1的无法访问 ——_——app.run(host"0.…

C++11语法笔记

文章目录 一.类中新增的默认成员函数:移动赋值和移动构造二.lambda表达式三.包装器bind函数 一.类中新增的默认成员函数:移动赋值和移动构造 二.lambda表达式 三.包装器 bind函数

背上大大书包准备run之JS篇(含Es6)

word天,整理都半天,这么多,不得背死我。。。 js数据类型? 原始类型(Primitive types): 数字 (Number):例如:42, 3.14. 字符串 (String):例如:"Hello…

使用 PyTorch 逐步检测单个对象

一、说明 在对象检测任务中,我们希望找到图像中对象的位置。我们可以搜索一种类型的对象(单对象检测,如本教程所示)或多个对象(多对象检测)。通常,我们使用边界框定义对象的位置。有几种方法可以…

【Fegin技术专题】「原生态」打开Fegin之RPC技术的开端,你会使用原生态的Fegin吗?(上)

前提介绍 Feign是SpringCloud中服务消费端的调用框架,通常与ribbon,hystrix等组合使用。由于遗留原因,某些项目中,整个系统并不是SpringCloud项目,甚至不是Spring项目,而使用者关注的重点仅仅是简化http调…

《golang设计模式》第二部分·结构型模式-01-适配器模式(Adapter)

文章目录 1. 概念1.1 角色1.2 应用场景1.2 类图 2. 代码示例2.1 设计2.2 代码2.3 示例类图 1. 概念 定义一个适配器,帮助原本不能实现接口的类“实现”该接口 1.1 角色 目标(Target):客户端调用的目标接口 被适配者&#xff08…

Linux tar包安装 Prometheus 和 Grafana

0. 介绍 用tar包的方式安装 Prometheus 和 Grafana Prometheus:开源的监控方案Grafana:将Prometheus的数据可视化平台 1. Prometheus 1. 下载 与 解压 官网下载: https://prometheus.io/download/#prometheus上传至机器解压命令:tar -xzf prometheus-*.tar.gz 2. 启动与暂…

phpspreadsheet excel导入导出

单个sheet页Excel2003版最大行数是65536行。Excel2007开始的版本最大行数是1048576行。Excel2003的最大列数是256列,2007以上版本是16384列。 xlswriter xlswriter - PHP 高性能 Excel 扩展,功能类似phpspreadsheet。它能够处理非常大的文件&#xff0…

微信小程序隐私协议模板

在 设置 中找到 用户隐私保护 进行更新,如下图: 具体协议补充可参考如下: 为了分辨用户,开发者将在获取你的明示同意后,收集你的微信昵称、头像 为了显示距离,开发者将在获取你的明示同意后,收…

8. yaml文件管理

文章目录 yaml文件管理编写yaml配置文件获取配置模板方法一方法二方法三方法四 yaml文件管理 Kubernetes 支持 YAML 和 JSON 格式管理资源对象 JSON 格式:主要用于 api 接口之间消息的传递YAML 格式:用于配置和管理,YAML 是一种简洁的非标记性…

Hash 缓存

Hash 缓存 输出文件名(Hash) 静态资源缓存是前端性能优化的一个点,所以在前端开发过程中,一般会最大限度的利用缓存(这里主要是强缓存)。如果设置了强缓存后,每次当我们部署了新的项目文件到线…

“深入探究JVM:揭秘Java虚拟机的工作原理“

标题:深入探究JVM:揭秘Java虚拟机的工作原理 摘要:本文将深入探究Java虚拟机(JVM)的工作原理,包括JVM的架构、内存管理、垃圾回收机制以及即时编译等关键概念。通过详细解释这些概念,读者将能够…

Android开发从0开始(图形与按钮)

Drawable: drawable是抽象类。包括图片,色块,画板,背景。 drawable-ldpi 存放低分辨率图片。drawable-hdpi 高分辨率。drawable-xxhdpi 超高分辨率。 Android:src”drawable/image” 即可使用 Shape: 形状图形。圆角,矩形等常见几…

dubbo之高可用

负载均衡 概述 负载均衡是指在集群中,将多个数据请求分散到不同的单元上执行,主要是为了提高系统的容错能力和对数据的处理能力。 Dubbo 负载均衡机制是决定一次服务调用使用哪个提供者的服务。 策略 在Dubbo中提供了7中负载均衡策略,默…

综合能源系统(6)——综合能源综合评估技术

综合能源系统关键技术与典型案例  何泽家,李德智主编 综合能源系统是多种能源系统非线性耦合的、多时间与空间尺度耦合的“源-网-荷一储”一体化系统,通过能源耦合、多能互补,能够实现能源的高效利用,并提高新能源的利用水平。对…

uni-app 运行时报错“本应用使用HBuilderX x.x.x 或对应的cli版本编译,而手机端SDK版本是x.x.x。不匹配的版本可能造成应用异常”

uni-app 运行时报错“本应用使用HBuilderX x.x.x 或对应的cli版本编译,而手机端SDK版本是x.x.x。不匹配的版本可能造成应用异常” 出现原因 手机端SDK版本和HBuilderX版本不一致。 解决办法 方法一 项目根目录下找到 manifest.json 配置文件,选择源码…

在idea运行python文件

在idea运行python文件 如果在idea运行python文件而没有弹出run的选项,则点击File->Settings…->Plugins,在里面搜索python,如果没有显示则在Maketplace进行搜索, 接着Install,然后restart

Spring5新功能

文章目录 前言一、整合日志功能二、Nullable注解三、函数式风格编程四、JUnit5单元测试框架总结 前言 整合日志、Nullable注解、函数式风格编程、整合JUnit5、Webflux 一、整合日志功能 Spring5移除了Log4jConfigListener,官方建议使用Log4j2. 依赖: &…