Webpack中的自定义 loader 的简单实现

devtools/2024/11/13 8:10:14/

1.loader简单介绍

webpack 中 loader 是用于对模块的源代码进行转换(处理)的插件。例如 webpack 中常见的loader, css-loader、babel-loader。

2.自定义 loader

关于 loader:

  • loader本质上是一个导出为函数的JavaScript模块,即函数;
  • loader runner库会调用这个函数,然后将上一个loader产生的结果或者资源文件传入进去;
  • 自定义 loader函数的接收参数有content(资源文件的内容)、map(sourcemap的数据)、meta(一些元数据);
例如自定义个 loader 并希望打包时指定类型文件能够经过自定义loader 的函数的处理:
自定义一个 hgf-loader01的 loader
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')module.exports = function(context) {console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');// 获取传入 optionsconst options = this.getOptions()validate(schema, options)console.log('hgf-custom-Options~~~~~~~~~~~~~~~~~~', options);return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader111111-pitching~~~~~~~~~~~~~~~~~~~');}

3.关于 pitching loader

webpack 的官方文档中有对 pitching loader 的介绍,即自定义 loader 中的 pitch 属性

 4.多 loader 的执行流程、顺序

例如该 webpack 中配置多个 loader进行打包:

const path = require('path')module.exports = {entry: './src/main.js',mode: 'development',output: {filename: 'bundle.js',path: path.resolve(__dirname, 'dist')},module: {rules: [{test:/\.js$/i,use: {loader: 'hgf-loader01',options: {parameter1: 'hgf-loader01----parameter1',parameter2: 2222}},enforce: 'pre'},{test:/\.js$/i,use: {loader: 'hgf-loader02'}},{test:/\.js$/i,use: {loader: 'hgf-loader03'}}]},resolveLoader: {modules: ['node_modules', './src/hgf-loader']}
}

loader 的内容

// hgf-loader01
const { validate } = require('schema-utils')
const schema = require('../schema/loader01-schema.json')module.exports = function(context) {console.log('testing hgf-custom-loader111111~~~~~~~~~~~~~~~~~~~');// 获取传入 optionsconst options = this.getOptions()validate(schema, options)console.log('hgf-custom-Options~~~~~~~~~~~~~~~~~~', options);return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader111111-pitching~~~~~~~~~~~~~~~~~~~');}// hgf-loader02
module.exports = function(context) {console.log('testing hgf-custom-loader222222~~~~~~~~~~~~~~~~~~~');return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader222222-pitching~~~~~~~~~~~~~~~~~~~');}// hgf-loader03module.exports = function(context) {console.log('testing hgf-custom-loader333333~~~~~~~~~~~~~~~~~~~');return context + 'hgf-custom-loader'
}module.exports.pitch = function() {console.log('testing hgf-custom-loader333333-pitching~~~~~~~~~~~~~~~~~~~');}

打包运行结果:

可看到从上往下依次运行 loader 的 pitching loader,再从下往上的运行 loader,pitching loader从上往下运行,可以在 pitching 阶段,传递给 pitch 方法的 data,在执行阶段也会暴露在 this.data 之下,并且可以用于在循环时,捕获并共享前面的信息。

a.webpack 的 resolveLoader 属性

webpack 中通过配置resolveLoader属性,设置 webpack 解析文件的查找来源

b.webpage 的 enforce 属性

webpack 中 loader 的执行顺序默认是从下往上依次执行 loader 对资源文件进行处理,但是 webpack 也提供了 enforce 属性,可以指定 loader 的执行顺序

"pre": 设置第一个执行, "post"设置最后一个执行

例如将上面代码的 loader 改为如下顺序,配置 enforce 属性后,loader 的执行顺序变化

可看出默认从下往上应该为 loader03 →loader02→loader01,配置 enforce 属性后,基于属性配置值进行了 loader 执行顺序的改变。


http://www.ppmy.cn/devtools/102268.html

相关文章

LabVIEW反编译与源程序加密破解

最近,不少粉丝咨询如何将生成的 LabVIEW 可执行程序反编译,所以写了这篇文章来详细探讨这个话题。反编译问题引起了广泛的关注,许多开发者希望能够从现有的可执行文件中提取源代码,以便进行修改或重新利用。然而,反编译…

在网易云音乐服务器故障事件中提升应急处理能力的探讨

一、事件回顾 2024年8月19日下午,网易云音乐疑似出现服务器故障,导致网页端出现502 Bad Gateway报错,且App也无法正常使用。这一突发事件不仅严重影响了用户体验,还给网易云音乐带来了声誉和经济上的损失。面对这一紧急情况&…

深度剖析C++string(中)

目录 前言 1.string 类对象的部分修改操作 2.其他函数的部分讲解 结束语 前言 上篇博客我们对Cstring的定义和一些函数接口做了讲解学习,接下来我们将继续对C的函数进行学习。 1.string 类对象的部分修改操作 函数名称功能说明 push_back 在字符串后尾插字…

Linux 实时调度器:带宽限制

文章目录 1. 前言2. 概念3. 实时进程 的 带宽限制3.1 实时进程 带宽限制 初始化3.2 启动 实时进程 带宽 监测定时器3.3 累加 实时进程 消耗的带宽3.4 查看 实时进程 带宽消耗情况3.5 小结 1. 前言 限于作者能力水平,本文可能存在谬误,因此而给读者带来的…

配电房挂轨机器人巡检系统的主要优点包括

背景 配电房是724h工作的封闭环境,人工巡检无法在时间上和空间上对配电室进行全量监控。有限的巡检时间,必然带来设备运转的黑盒时间,设备故障和隐患无法及时监控与消缺。因而不可避免存在漏检、误检的情况,不仅容易隐藏电力系统…

探索深度学习的强大工具:PyTorch的torch.utils.data模块

探索深度学习的强大工具:PyTorch的torch.utils.data模块 在深度学习的世界里,数据是模型训练的基石。PyTorch,作为当前最流行的深度学习框架之一,提供了一个强大的torch.utils.data模块,它使得数据加载、处理和迭代变…

Nginx+ModSecurity(3.0.x)安装教程及配置WAF规则文件

本文主要介绍ModSecurity v3.0.x在Nginx环境下的安装、WAF规则文件配置、以及防御效果的验证,因此对于Nginx仅进行简单化安装。 服务器操作系统:linux 位最小化安装 一、安装相关依赖工具 Bash yum install -y git wget epel-release yum install -y g…

【MATLAB学习笔记】绘图——分割绘图背景并填充不同的颜色

目录 前言分割背景函数示例基本绘图分割背景函数的使用保存图片 总代码总结 前言 在MATLAB中,使用窗口对象的Color属性可以轻松地设置不同的背景颜色,但是只能设置一种单一颜色。若需要将绘图背景设置成多种颜色,比如左右两边不同的颜色&…