webpack5-手撸RemoveConsolePlugin插件

news2024/11/13 7:02:47

写在前面

其实呢,这个东西也就那样,主要是我们得清楚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.coloradmin.cn/o/2128261.html

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

相关文章

FreeRTOS内部机制学习03(事件组内部机制)

文章目录 事件组使用的场景事件组的核心以及Set事件API做的事情事件组的特殊之处事件组为什么不关闭中断xEventGroupSetBitsFromISR内部是怎么做的? 事件组使用的场景 学校组织秋游,组长在等待: 张三:我到了 李四:我…

HTB-Vaccine(suid提权、sqlmap、john2zip)

前言 各位师傅大家好,我是qmx_07,今天来为大家讲解Vaccine靶机 渗透过程 信息搜集 服务器开放了 21FTP服务、22SSH服务、80HTTP服务 通过匿名登录FTP服务器 通过匿名登录到服务器,发现backup.zip文件,可能存在账号密码 发现b…

centos上开启mysql远程访问功能

自从mysql8以后,mysql有些命令变了,例如授权需要分成好几行。如果想远程访问mysql,那么可以这样做: mysql -u root -p mysql //先登录mysql create user root% identified by 你自己的密码;//先建立一个root用户和密码 grant a…

大模型日报|16 篇必读的大模型论文

大家好,今日必读的大模型论文来啦! 清华团队提出歌曲生成模型 SongCreator 虽然此前研究已对歌曲生成的各个方面进行了探索,如歌唱发声、声乐创作和乐器编曲等,但要生成既有歌词又有人声和伴奏的歌曲仍是一项重大挑战&#xff0…

SpringMVC的初理解

1. SpringMVC是对表述层(Controller)解决方案 主要是 1.简化前端参数接收( 形参列表 ) 2.简化后端数据响应(返回值) 1.数据的接受 1.路径的匹配 使用RequestMapping(可以在类上或在方法上),支持模糊查询,在内部有method附带…

【数据分析】利用Python+AI+工作流实现自动化数据分析-全流程讲解

文章目录 一、为什么要用AI进行自动化分析?二、AI自动化分析场景三、编写Python脚本示例1、用flask实现让AI分析数据内容使用说明:示例2、用定时任务的方式,定时处理AI数据📋 代码说明 四、把AI分析的数据,放到AI工作流…

详聊LLaMa技术细节:LLaMA大模型是如何炼成的?

本文介绍来自 Meta AI 的 LLaMa 模型,类似于 OPT,也是一种完全开源的大语言模型。LLaMa 的参数量级从 7B 到 65B 大小不等,是在数万亿个 token 上面训练得到。值得一提的是,LLaMa 虽然只使用公共的数据集,依然取得了强…

从AI到大数据,数字技术服务平台全栈赋能企业升级

在当今科技迅猛发展的时代,从 AI(人工智能)到大数据,数字技术正以前所未有的速度重塑着各个行业。而数字技术服务平台,则如同一位强大的魔法师,全栈赋能企业升级,为企业开启崭新的发展篇章。 AI…

若依搭建vue3项目

搭建vue3后台管理系统页面,与vue2基本一致,方便以后可以快速搭建,现在将基础搭建以及若依框架搭建流程再次梳理一下 文章目录 环境准备1. Node.js环境安装2. 推荐包管理器:pnpm3. 安装create-vue工具 方式一:脚手架搭建…

计算机网络 ---- 计算机网络的体系结构【计算机网络的分层结构】

一、以快递网络来引入分层思想 1.1 “分层” 的设计思想【将庞大而复杂的问题,转化为若干较小的局部问题】 从我们最熟悉的快递网络出发,在你家附近会有一个快递终点站A,在其他的城市,也会有这种快递终点站,比如说快递…

贷款防坑秘籍:揭秘几大陷阱,让套路无所遁形!

今日话题聚焦于贷款领域的潜藏陷阱,旨在助您避开精心设计的圈套,确保金融决策的智慧与安全。我们常误以为寻得了可靠的助力,实则可能步入了层层迷局,以下便是一系列揭秘与警示: 首先,警惕“超低利率”的甜蜜…

终于!!把企业轻量级数据中台的构建路径理清了!

一、标准化轻量级数据中台落地探索 尽管数据中台在近些年的热度有所下降,但大中型企业依然对其建设非常重视。企业通过数据中台的搭建,旨在构建统一的数据开发、管理和应用规范,创造标准统一的数据资产,夯实数据互通的基础&#…

对话:LLC磁集成能否成为充电桩模块电源常态产品?

编者按:在终端需求疲软的影响下,前两年火热的新能源汽车、光伏、储能等新能源领域也掀起了价格战,储能已正式进入0.5元时代,新能源汽车领域价格战更是一轮接一轮,成本管控成为2024年企业绕不开的话题。 接下来我们将围…

2024北京IC WORLD大会启幕:高频科技展位人气高涨,共绘半导体产业“芯”篇章

9月11日,2024北京微电子国际研讨会暨IC WORLD大会在北人亦创国际会展中心盛大启幕。此次大会汇集200余家集成电路装备、零部件到材料等全领域企业,纷纷展出最新成果,共同推动集成电路产业向聚集化、链条化、高端化方向迈进。 高频科技作为半导体水系统领域的代表性企业受邀参加…

机器学习 第14章 概率图模型

目录 隐马尔可夫模型(HMM)马尔可夫随机场(MRF)条件随机场(CRF)学习与推断变量消去信念传播 近似推断MCMC采样变分推断 话题模型 隐马尔可夫模型(HMM) 隐马尔可夫模型 (Hidden Markov Model, HMM) 是一种统…

SpringBoot景区分时预约系统---附源码77951

目 录 摘要 1 绪论 1.1 选题背景与意义 1.2开发现状 1.3论文结构与章节安排 2 景区分时预约系统系统分析 2.1 可行性分析 2.1.1 技术可行性分析 2.1.2 经济可行性分析 2.1.3 法律可行性分析 2.2 系统功能分析 2.2.1 功能性分析 2.2.2 非功能性分析 2.3 系统用例分…

Sirius:一种高效的上下文稀疏性校正方法,恢复稀疏模型在推理任务上的性能...

论文:Sirius: Contextual Sparsity with Correction for Efficient LLMs地址:https://www.arxiv.org/abs/2409.03856 研究背景 研究问题:这篇文章要解决的问题是大型语言模型(LLMs)在推理效率上的挑战。随着LLMs的广泛…

智能获客系统,是企业引爆营销潜力的新工具

企业为争取每一位潜在客户投入了大量资源和精力,然而即使拥有最先进的营销策略和庞大的营销预算,面对海量数据和复杂的用户行为模式,传统的获客方式依然效能有限。如果您的企业也有这方面的痛点,不让考虑使用智能获客系统&#xf…

影刀RPA实战:自动化同步商品库存至各大电商平台(二)

在当今的电商世界中,多平台运营已成为常态。商家需要在多个电商平台上维护商品库存的一致性,以确保顾客体验的流畅性和库存管理的高效性。运营人员每天面临的问题,就是把公司的商品库存数据,间断性的同步到电商平台上,…

Django+Vue基于OpenCV的人脸识别系统的设计与实现

目录 1 项目介绍2 项目截图3 核心代码3.1 需要的环境3.2 Django接口层3.3 实体类3.4 config.ini3.5 启动类3.5 Vue 4 数据库表设计5 文档参考6 计算机毕设选题推荐7 源码获取 1 项目介绍 博主个人介绍:CSDN认证博客专家,CSDN平台Java领域优质创作者&…