背景

  1. 不知道webpack插件是怎么回事,除了官方的文档外,还有一个很直观的方式,就是看源码。
  2. 看源码是一个挖宝的行动,也是一次冒险,我们可以找一些代码量不是很大的源码
  3. 比如webpack插件,我们就可以通过BannerPlugin源码,来看下官方是如何实现一个插件的
  4. 希望对各位同学有所帮助,必要时可以通过源码进行一门技术的学习,加深理解

闲言少叙,直接上代码

https://github.com/webpack/webpack/blob/main/lib/BannerPlugin.js

配合文档api

https://webpack.docschina.org/api/compilation-object/#updateasset

代码分析已添加中文注释

/*
MIT License http://www.opensource.org/licenses/mit-license.php
Author Tobias Koppers @sokra
*/ "use strict"; const { ConcatSource } = require("webpack-sources");
const Compilation = require("./Compilation");
const ModuleFilenameHelpers = require("./ModuleFilenameHelpers");
const Template = require("./Template");
const createSchemaValidation = require("./util/create-schema-validation"); /** @typedef {import("../declarations/plugins/BannerPlugin").BannerPluginArgument} BannerPluginArgument */
/** @typedef {import("../declarations/plugins/BannerPlugin").BannerPluginOptions} BannerPluginOptions */
/** @typedef {import("./Compiler")} Compiler */ // 创建一个验证
const validate = createSchemaValidation(
require("../schemas/plugins/BannerPlugin.check.js"),
() => require("../schemas/plugins/BannerPlugin.json"),
{
name: "Banner Plugin",
baseDataPath: "options",
}
); //包装Banner文字
const wrapComment = (str) => {
if (!str.includes("\n")) {
return Template.toComment(str);
}
return `/*!\n * ${str
.replace(/\*\//g, "* /")
.split("\n")
.join("\n * ")
.replace(/\s+\n/g, "\n")
.trimRight()}\n */`;
}; //插件类
class BannerPlugin {
/**
* @param {BannerPluginArgument} options options object
* 初始化插件配置
*/
constructor(options) {
if (typeof options === "string" || typeof options === "function") {
options = {
banner: options,
};
} validate(options); this.options = options; const bannerOption = options.banner;
if (typeof bannerOption === "function") {
const getBanner = bannerOption;
this.banner = this.options.raw
? getBanner
: (data) => wrapComment(getBanner(data));
} else {
const banner = this.options.raw
? bannerOption
: wrapComment(bannerOption);
this.banner = () => banner;
}
} /**
* Apply the plugin
* @param {Compiler} compiler the compiler instance
* @returns {void}
* 插件主方法
*/
apply(compiler) {
const options = this.options;
const banner = this.banner;
const matchObject = ModuleFilenameHelpers.matchObject.bind(
undefined,
options
);
//创建一个Map,处理如果添加过的文件,不在添加
const cache = new WeakMap(); compiler.hooks.compilation.tap("BannerPlugin", (compilation) => {
//处理Assets的hook
compilation.hooks.processAssets.tap(
{
name: "BannerPlugin",
//PROCESS_ASSETS_STAGE_ADDITIONS — 为现有的 asset 添加额外的内容,例如 banner 或初始代码。
stage: Compilation.PROCESS_ASSETS_STAGE_ADDITIONS,
},
() => {
//遍历当前编译对象的chunks
for (const chunk of compilation.chunks) {
//如果配置标识只处理入口,但是当前chunk不是入口,直接进入下一次循环
if (options.entryOnly && !chunk.canBeInitial()) {
continue;
}
//否则,遍历chunk下的文件
for (const file of chunk.files) {
//根据配置匹配文件是否满足要求,如果不满足,直接进入下一次循环,处理下一个文件
if (!matchObject(file)) {
continue;
} //否则,
const data = {
chunk,
filename: file,
}; //获取插值路径?https://webpack.docschina.org/api/compilation-object/#getpath
const comment = compilation.getPath(banner, data); //修改Asset,https://webpack.docschina.org/api/compilation-object/#updateasset
compilation.updateAsset(file, (old) => {
//从缓存中获取
let cached = cache.get(old);
//如果缓存不存在 或者缓存的comment 不等于当前的comment
if (!cached || cached.comment !== comment) {
//源文件追加到头部或者尾部
const source = options.footer
? new ConcatSource(old, "\n", comment)
: new ConcatSource(comment, "\n", old);
//创建对象加到缓存
cache.set(old, { source, comment }); //返回修改后的源
return source;
}
//返回缓存中的源
return cached.source;
});
}
}
}
);
});
}
} module.exports = BannerPlugin;

总结

  1. 查看源码,查看源码,查看源码
  2. WeakMap可以深入了解下,应该是避免对象不释放导致内存问题。
  3. 插件里用到的很多工具方法可以继续深入,一遍自己开发插件时可以参考

【前端必会】不知道webpack插件? webpack插件源码分析BannerPlugin的更多相关文章

  1. Android Small插件化框架源码分析

    Android Small插件化框架源码分析 目录 概述 Small如何使用 插件加载流程 待改进的地方 一.概述 Small是一个写得非常简洁的插件化框架,工程源码位置:https://github ...

  2. Unity时钟定时器插件——Vision Timer源码分析之二

      Unity时钟定时器插件——Vision Timer源码分析之二 By D.S.Qiu 尊重他人的劳动,支持原创,转载请注明出处:http.dsqiu.iteye.com 前面的已经介绍了vp_T ...

  3. Mybatis 插件使用及源码分析

    Mybatis 插件 Mybatis插件主要是通过JDK动态代理实现的,插件可以针对接口中的方法进行代理增强,在Mybatis中比较重要的接口如下: Executor :sql执行器,包含多个实现类, ...

  4. Unity时钟定时器插件——Vision Timer源码分析之一

    因为项目中,UI的所有模块都没有MonBehaviour类(纯粹的C#类),只有像NGUI的基本组件的类是继承MonoBehaviour.因为没有继承MonoBehaviour,这也不能使用Updat ...

  5. Jenkins插件hyper slaves源码分析

    1.public class HyperSlaves extends Plugin implements Describable<HyperSlaves> (1).init():初始化co ...

  6. 插件开发之360 DroidPlugin源码分析(五)Service预注册占坑

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52264977 在了解系统的activity,service,broa ...

  7. Kettle 4.2源码分析第四讲--KettleJob机制与Database插件简介(含讲解PPT)

    1.  Job机制 一个job项代表ETL控制流中的一项逻辑任务.Job项将会顺序执行,每个job项会产生一个结果,能作为别的分支上job项的条件. 图 1 job项示例 1.1. Job类图简介 图 ...

  8. 插件开发之360 DroidPlugin源码分析(四)Activity预注册占坑

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52258434 在了解系统的activity,service,broa ...

  9. 插件开发之360 DroidPlugin源码分析(二)Hook机制

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52124397 前言:新插件的开发,可以说是为插件开发者带来了福音,虽然还很多坑要填补, ...

随机推荐

  1. Redis_

    Redis学习 Redis学习(一) 1. NoSQL的引言 NoSQL(Not Only SQL ),意即不仅仅是SQL, 泛指非关系型的数据库.Nosql这个技术门类,早期就有人提出,发展至200 ...

  2. CSS 导航栏底线向两边延伸动画

    利用元素向左移动的同时,宽度变长,实现两边延伸效果. react代码: <ul className="tab"> { moduleList.map((item: any ...

  3. Dapr 与 NestJs ,实战编写一个 Pub & Sub 装饰器

    Dapr 是一个可移植的.事件驱动的运行时,它使任何开发人员能够轻松构建出弹性的.无状态和有状态的应用程序,并可运行在云平台或边缘计算中,它同时也支持多种编程语言和开发框架.Dapr 确保开发人员专注 ...

  4. 数据平台调度升级改造 | 从Azkaban 平滑过度到 Apache DolphinScheduler 的操作实践

    Fordeal的数据平台调度系统之前是基于Azkaban进行二次开发的,但是在用户层面.技术层面都存在一些痛点问题难以被解决.比如在用户层面缺少任务可视化编辑界面.补数等必要功能,导致用户上手难体验差 ...

  5. 100行代码实现一个RISC-V架构下的多线程管理框架

    1. 摘要 本文将基于RISC-V架构和qemu仿真器实现一个简单的多线程调度和管理框架, 旨在通过简单的代码阐明如何实现线程的上下文保存和切换, 线程的调度并非本文的重点, 故线程调度模块只是简单地 ...

  6. Oracle-DDL,DML理解以及应用

    SQL语句:虽然SQL语句不区分大小写,但是字符串的值时区分大小写的.SQL是结构化查询语句,操作数据库需要向数据库发送SQL语句,数据库会理解SQL语句中含义并执行SQL语句分为:DDL(数据定义语 ...

  7. java学习第一天.day03

    运行程序数据存储 ASCII Unicode(万国码) A在码表的顺序是65,a在码表的顺序是97,1代表49 变量 定义一个变量声明数据类型是开辟一个空间存储数据,java对数据的定义比较严格,比如 ...

  8. 应用集成-在Hexo、Hugo博客框架中使用Gitalk基于Github上仓库项目的issue无后端服务评论系统实践

    关注「WeiyiGeek」公众号 设为「特别关注」每天带你玩转网络安全运维.应用开发.物联网IOT学习! 希望各位看友[关注.点赞.评论.收藏.投币],助力每一个梦想. 本章目录 目录 0x00 Gi ...

  9. SecureCRT 和 Xshell 连接ENSP 教程

    前言:很多人问我说想尝试使用 CRT和Xshell连接 ENSP的某台设备,以模拟现网中的工作状态,所以出了这篇随笔. ENSP版本: Xshell 连接教程 Xshell 7 评估版(其他版本没测试 ...

  10. java后台生成文件给前端下载(response输出流)

    1.设置 ContentType response.setContentType("application/x-download"); 2.设置文件名,并指定编码格式 fileNa ...