webpack5-手撸RemoveConsolePlugin插件

写在前面

其实呢,这个东西也就那样,主要是我们得清楚webpack构建过程中的生命周期钩子,

就拿这个插件来说,我们想要把输出的js文件里面的内容中的console语句去掉,那么我们就需要找到webpack处理完文件时的钩子,然后通过正则表达式替换为空字符串即可

webpack hooks文档


我们就是要在这里找出来我们想要处理的时机,到底是哪个钩子做的事情。

插件的代码本质就是一个类,我们按照webpack的规定去实现内部的apply方法即可

它是node中执行的东西,所以按照CommonJS规范的模块化语法

// 就是实现一个apply方法
class CustomxxxxPLugin {apply(compiler) {....}
}module.exports = CustomxxxxPLugin;

铺垫的应该很直白,没什么难的东西,直接上代码

.custom-plugin/removeConsolePlugin.js

/** 去除代码中的console语句--plugin*/
const pluginName = 'consoleRemovePlugin';class RemoveConsolePlugin {/** * 参数types 为数组,传入*为所有类型* ['log', 'info', 'warn', 'error'] === ['*']* 也可以按需传入*/constructor(options) {if (options.types) {if (!Array.isArray(options.types)) {throw new Error('【consoleRemovePlugin】error: types must be an array');} else {if (options.types.includes('*')) {options.types = ['log', 'info', 'warn', 'error'];}options.types.forEach(type => {if (!['log', 'info', 'warn', 'error'].includes(type)) {throw new Error('【consoleRemovePlugin】error: types must be log, info, warn, error');}})}} else {this.options.types = ['log', 'info', 'warn', 'error'];}this.options = options;}apply(compiler) {let handler = (assets, compilation) => {/** 处理正则表达式:用来匹配console.*()和console.*() */let removedStr = this.options.types.reduce((a, b) => (a + '|' + b));let reDict = {1: [RegExp(`\\.console\\.(${removedStr})\\(\\)`, 'g'), ''],2: [RegExp(`\\.console\\.(${removedStr})\\(`, 'g'), ';('],3: [RegExp(`console\\.(${removedStr})\\(\\)`, 'g'), ''],4: [RegExp(`console\\.(${removedStr})\\(`, 'g'), '(']}Object.entries(assets).forEach(([filename, source]) => {let outputContent = source.source();if (/\.(js|ts|jsx|tsx)/.test(filename)) {Object.entries(reDict).forEach(([_, value]) => {outputContent = outputContent.replace(value[0], value[1]);})compilation.assets[filename] = {source: () => outputContent,size: () => Buffer.byteLength(outputContent, 'utf8')};}})}// https://webpack.docschina.org/api/compiler-hooks/#compilation/***  compilation钩子*  compilation 创建之后执行*/compiler.hooks.compilation.tap(pluginName, compilation => {// https://webpack.docschina.org/api/compilation-hooks/#processassets// webpack5的钩子,不使用webpack4// afterProcessAssets钩子的使用而不是processAssets,// 是因为webpack包中的sourceMapDevToolPlugin.js使用processAssets钩子,// 我们的插件会更改source对象,导致sourceMapDevToolPlugin.js插件无法正确使用asset.source// 具体体现在node_modules/webpack/lib/SourceMapDevToolPlugin.js中getTaskForFile方法compilation.hooks.afterProcessAssets.tap({name: pluginName,}, assets => handler(assets, compilation))})}
}module.exports = RemoveConsolePlugin;

webpack.config.js中的使用

...
const RemoveConsolePlugin = require('./custom-plugin/consoleRemove');
module.exports = function (webpackEnv) {...return {...plugins: [...,!isEnvDevelopment && new RemoveConsolePlugin({types: ['log'] // ["*"]}),]}
}

写在最后

如果有帮到大家,就帮博主点个免费的赞,博主会特别开心能帮到大家嘞!

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

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

相关文章

海外VS国内:网安上市公司人均创收对比

二级市场分析章节中分析了中国网络网络安全上市公司人均创收63.2万、人均毛利37.6万,人均创利-1.6万。 有网友问了:海外网络安全公司的人均情况如何?那么让我们一起看看吧。 我们统计了在海外上市的28家主要网络安全公司的2023年的人均情况&…

2020ICPC上海 D - Walker M - Gitignore

D: 首先显然要二分,判断当前二分的mid时间下是否能满足走满0~n 枚举所有情况,这里按照左,右起点p1,p2分别讨论 p1向左 p2向左(以下向左和向右都代表向左或者向右到墙,而不代表初速度方向),只需要计算p1或者p2反弹之后还能走距离n就是合法 p1向左 p2向右&#xff…

PHP智慧家政同城服务家政系统小程序源码

智慧家政,同城服务新篇章 —— 探索家政系统的无限可能 开篇:走进智慧家政时代 在这个快节奏的生活中,每一分每一秒都显得尤为珍贵。当忙碌成为常态,如何让家成为真正的避风港?答案或许就藏在“智慧家政同城服务家政…

155K Star,Python 入门到进阶最佳学习资源

Hi,骚年,我是大 G,公众号「GitHub 指北」会推荐 GitHub 上有趣有用的项目,一分钟 get 一个优秀的开源项目,挖掘开源的价值,欢迎关注。 导语 如果你正在寻找一个全面、系统、深入的 Python 学习项目&#…

合资油车断崖式崩盘,买车的千万慎重了

文 | AUTO芯球 作者 | 雷慢 合资车,燃油车全体大逃亡的时候来了, 你敢信吗,8月份,国内新能源汽车零售渗透率达到54%, 我给大家讲个冷笑话, 几个月前还有车企老总说什么, “只要传统车企一发…

pyflink 安装和测试

FPY Warning! 安装 apache-Flink # pip install apache-Flink -i https://pypi.tuna.tsinghua.edu.cn/simple/ Looking in indexes: https://pypi.tuna.tsinghua.edu.cn/simple/ Collecting apache-FlinkDownloading https://pypi.tuna.tsinghua.edu.cn/packages/7f/a3/ad502…

软件测试学习笔记丨Docker 安装、管理、搭建服务

本文转自测试人社区,原文链接:https://ceshiren.com/t/topic/32192 容器(Docker)技术的价值 保证环境一致性,只要使用相同镜像部署就可以保证一致性。轻量级虚拟化访问,运行更快,资源更小。同时…

微信小程序使用 ==== 粘性布局

目录 Chrome杀了个回马枪 position:sticky简介 你可能不知道的position:sticky 深入理解粘性定位的计算规则 粘性定位其他特征 代码实现 微信小程序在scroll-view中使用sticky Chrome杀了个回马枪 position:sticky早有耳闻也有所了解,后来,Chro…

长业务事务的离线并发问题

事务指代一组操作同时成功或同时失败,事务可分为两类: 系统事务:即关系数据库事务,一次数据库连接中由start transaction或begin开启,commit表示提交,rollback表示回滚;业务事务:完…

力扣题解2848

大家好,欢迎来到无限大的频道。 今日继续给大家带来力扣题解。 题目描述(简单): 与车相交的点 给你一个下标从 0 开始的二维整数数组 nums 表示汽车停放在数轴上的坐标。对于任意下标 i,nums[i] [starti, endi] &…

html+css+js网页设计 旅游 厦门旅游网10个页面

htmlcssjs网页设计 旅游 厦门旅游网10个页面 网页作品代码简单,可使用任意HTML辑软件(如:Dreamweaver、HBuilder、Vscode 、Sublime 、Webstorm、Text 、Notepad 等任意html编辑软件进行运行及修改编辑等操作)。 获取源码 1&am…

SpringBoot权限认证-Sa-Token的使用与详解

本文详细介绍了Sa-Token在Java项目中的使用方法,包括Sa-Token的基本概念、与其他权限框架的比较、基本语法和高级用法,并通过实例讲解了如何在项目中集成和使用Sa-Token。作为一款轻量级Java权限认证框架,Sa-Token在简化权限管理、提高开发效…

『功能项目』切换职业技能面板【49】

我们打开上一篇48切换职业面板的项目, 本章要做的事情是制作第二职业法师技能面板、第三职业面板并且完成切换 双击打开Canvas进入预制体空间 复制三个技能栏面板 重命名 设置第一技能栏 设置第二职业技能栏 设置第三职业技能栏 修改脚本:ChangeProfess…

FreeRTOS—任务通知

一,概念介绍 队列、信号量、事件组等IPC技术都需要创建一个中间对象进程之间通过这些中间对象进行通讯或同步。创建对象就需要分配内存,占用一定内存。 二,任务通知的特点: 一个任务或ISR向另外一个指定的任务发送通知&#xff0c…

PhpStudy下载安装使用学习

一、官网下载 官网地址:Windows版phpstudy下载 - 小皮面板(phpstudy)https://old.xp.cn/download.html 【首页】选择Windows版,进行下载 下载完成是一个压缩包的形式,解压得到一个.exe的执行文件,点击执行安装程序(注…

Spring Boot环境下的学生读书笔记共享

第4章 系统设计 4.1系统结构设计 读书笔记共享平台的设计主要是为了满足用户的实际需求。 因此,它需要通过Internet实现,因此它必须具备硬件和软件基础。该平台最终可以通过科学技术和各种方式达到支持智能化的信息管理的目的。因此,它必须具…

数据结构——(java版)Map与Set

文章目录 二叉搜索树(1) 二叉搜索树的概念:(2)二叉搜索树的意义:(3)二叉搜索树的实现:实现的方法与属性实现二叉搜索树的查询:实现二叉搜索树的插入&#xff…

【Kubernetes笔记】为什么DNS解析会超时?

【Kubernetes笔记】为什么DNS解析会超时? 目录 1 问题背景2 产生后续的问题3 DNS 负缓存工作原理:4 如何解决和缓解 DNS 负缓存 4.1 减小负缓存 TTL4.2 重试机制4.3 减少 Pod 的频繁重启或调度4.4 使用 Headless Service4.5 手动刷新 DNS 缓存 5 总结 …

【Unity】 HTFramework框架(五十六)MarkdownText:支持运行时解析并显示Markdown文本

更新日期:2024年9月15日。 Github源码:[点我获取源码] Gitee源码:[点我获取源码] 索引 MarkdownText支持的Markdown语法标题强调文本表格嵌入图像超链接 使用MarkdownText设置项运行时属性解析使用ID模式嵌入图像 MarkdownText MarkdownText…

【Python机器学习】循环神经网络(RNN)——对RNN进行预测

目录 有状态性 双向RNN 编码向量 如果有一个经过训练的模型,接下来就可以对其进行预测: sample_1""" I hate that the dismal weather had me down for so long,when will it break! Ugh,when does happiness return? The sun is bl…