webpakc原理之开发一个清除console.log(xxx)的loader

news2024/11/25 2:41:10

一、webpack中清除console的方法

当然想要清除console我们可以使用babel-loader结合babel-plugin-transform-remove-console插件来实现。

  1. 安装babel-loader和babel-plugin-transform-remove-console插件
npm install babel-loader babel-plugin-transform-remove-console -D
  1. 在webpack配置文件中配置loader
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env'],
            plugins: [['transform-remove-console', {exclude: ['error', 'warn']}]]
          }
        }
      }
    ]
  }
};

其中,babel-plugin-transform-remove-console插件中的exclude选项可以指定保留哪些日志级别的console语句。上面的示例中保留了errorwarn级别的console语句,其它级别的将被移除。如果不指定exclude选项,则会移除所有console语句。

二、自定义实现clean-console-loader

上面我们是借助babel插件实现的清除console,那么经过前面章节的铺垫,我们了解了loader的本质、执行顺序、以及分类还有常用的api,我们是否可以自己尝试写一个类似功能的loader呢?

下面我们就一起来实现一下吧

其实很简单就用正则匹配替换一下就行了,哈哈哈

  • clean-console.loader
module.exports = function (content) {
  // 清除文件内容中console.log(xxx)
  return content.replace(/console\.log\(.*\);?/g, "");
};

配置使用

  • webpack.config.js
  module: {
    rules: [
      {
        test: /\.js$/,
        loader: "./loaders/clean-log-loader",
      },
     ]
   }

这样就可以啦

  • main.js
    在这里插入图片描述
    我们在main.js中写两个console

打包看看效果

npm run dev

在这里插入图片描述
可以看到控制台干干净净什么都没有,说明我们自定义的清除console语句的loader生效啦。

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

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

相关文章

TOGAF10®标准中文版--(阶段B — 业务架构)方法

4.5 方法 业务架构是能力、端到端价值交付、信息和组织结构的整体、多维业务视图的表示;以及这些业务视图和战略、产品、政策、计划和利益相关者之间的关系。 业务架构将业务元素与业务目标和其他领域的要素联系起来。 4.5.1 概述 业务架构知识是任何其他领域&a…

HIFUSE:用于医学图像分类的分层多尺度特征融合网络

文章目录 HIFUSE: HIERARCHICAL MULTI-SCALE FEATURE FUSION NETWORK FOR MEDICAL IMAGE CLASSIFICATION摘要本文方法实验结果 HIFUSE: HIERARCHICAL MULTI-SCALE FEATURE FUSION NETWORK FOR MEDICAL IMAGE CLASSIFICATION 摘要 在卷积神经网络(CNN)的…

Spring核心容器——从配置文件到注解开发 创建对象+成员变量赋值 增强方法

目录 引出Spring入门案例初识Spring入门案例1----用配置文件实现 Druid JDBCTemplate dao1.之前的方式:new对象2.用配置文件的方法把new对象交给Spring3.如果要用对象,从spring的容器中获取ac.getBean("userDao");4.实体类和dao层的代码--问…

NodeFormer:一种用于节点分类的可扩展图结构学习Transformer

文章目录 NodeFormer: A Scalable Graph Structure Learning Transformer for Node ClassificationAbstract方法General Model and Key ChallengesEfficient Learning Discrete Structures可微随机结构学习Input Structures as Relational BiasLearning Objective NodeFormer: …

网络的基础介绍

文章目录 1. 网络发展2. 认识 "协议"3. 网络协议初识3.1 协议分层 4. OSI七层模型4.1 TCP/IP五层(或四层)模型 5. 网络传输基本流程5.1 同一个网段内的主机文件传输5.2 认识MAC地址5.3 跨网段的主机文件传输 6. 数据包封装和分用 1. 网络发展 很早之前,计…

基于强化学习(Reinforcement learning,RL)的机器人路径规划MATLAB

一、Q-learning算法 Q-learning算法是强化学习算法中的一种,该算法主要包含:Agent、状态、动作、环境、回报和惩罚。Q-learning算法通过机器人与环境不断地交换信息,来实现自我学习。Q-learning算法中的Q表是机器人与环境交互后的结果&#…

[unity]Pico VR unity开发笔记(一)

Pico VR 开发笔记(一) XR Interaction Tooikit 版本 2.3.2 一、环境搭建 其实官方文档已经写的很详细了,这里只是不废话快速搭建,另外有一项官方说明有误的,补充说明一下,在开发工具部分说明 插件安装——…

深度学习基础——通过PyTorch构建神经网络实现1维/2维序列分类

文章目录 使用3层前馈神经网络使用循环神经网络生成pickle数据集构建RNN进行1维序列的训练、推理 使用3层前馈神经网络 通过PyTorch构建前馈神经网络,并对二维数据点进行分类。在该例子当中,所有的训练数据和测试数据都是通过高斯混合模型GMM生成的&…

网络 - 你可知 Telnet 能通但是 Ping 不通百思不得其解

问题描述 以前本人以为 telnet 通 ping 一定也是通的,telnet 能通,表示两台计算机之间建立了连接通道。理论上是能 ping 通的。 但是今天万万没想到,并不是这样... 原因分析 如果不能 ping 通,可能的原因是对方主机关闭了 ping…

MYSQL阶段_DAY01~DAY11(附笔记)

注意:(数据表如下) sort表: user表: zhangwu表: 1.Part1 JDBC操作数据库的步骤 1.注册驱动 告知JVM使用的是哪一个数据库的驱动, 把驱动类的对象交给DriverManager管理,用于…

一文理解MySQL的For Update行级锁

一文理解MySQL的For Update行级锁 引言一、MySQL的For Update简介1.1、For Update的作用1.2、For Update与其他锁定方式的区别 二、For Update的语法2.1、SELECT语句的基本语法2.2、mysql如何开启事务和提交事务?2.3、使用For Update进行数据锁定 三、如何使用For U…

王道计算机网络学习笔记(2)——物理层

前言 文章中的内容来自B站王道考研计算机网络课程,想要完整学习的可以到B站官方看完整版。 二:物理层 2.1.1:物理层基本概念 2.1.2:数据通信基本知识 1、数据通信模型和基本概念 通信目的是为了传递消息(消息&…

2022 年第十二届 MathorCup 高校数学建模挑战赛D题思路(移动通信网络站址规划和区域聚类问题)

目录 一、前言 二、问题背景 三、问题 四、解题思路 (1)针对问题1: (2)针对问题2: (3)针对问题3: 五、附上几个典型代码 (1)K-means算法…

6月16日,企业快成长技术创新论坛厦门站大数据专场开启!

全球大数据规模增长快速,2020年全球新增数据规模为64ZB,是2016年的400%,2035年新增数据将高达2140ZB1,大数据呈现指数级增长。随着数字经济的发展和数字化转型的深入,愈来愈多的数据资源正以数据要素的形态独立存在并参…

STM32F4_DS18B20红外温度传感器

目录 前言 1. 单总线时序结构 2. DS18B20结构 2.1 DS18B20操作流程 2.2 DS18B20数据帧 3. 温度存储格式 4. 硬件分析 5. 实验程序详解 5.1 main.c 5.2 DS18B20.c 5.3 DS18B20.h 前言 STM32F4内部集成了温度传感器。在之前的学习中,我们已经学习了使用AD进…

宁波天一永安杯初赛 wp-AGCTS战队

文章目录 MISCZipSimpleDocumentBeautifulImage WebDeserializationCodeCheck CryptoSecretRsa MobilePeacock pwnwingtip REPolenta MISC Zip ARCHPR 直接数字爆破,得到二进制密码,得 flag SimpleDocument Kali binwalk 发现里面有一 pdf 文件&#…

DRIFTINGBLUES: 3实战演练

文章目录 DRIFTINGBLUES: 3实战演练一、前期准备1、相关信息 二、信息收集1、端口扫描2、访问网站3、访问网页4、翻译内容5、访问网页6、翻译内容8、查看源码9、解密10、访问网页11、写入shell并登录12、连接shell13、查找nc14、反弹shell 三、后渗透1、进入家目录查找文件2、写…

分布式应用 ----- 点对点(p2p)网络

目录 1. 概述 1.1. P2P的概念 1.2. P2P产生的背景 1.3. P2P的优劣势 2. P2P分类 2.1. 根据中央化程度 2.2. 根据网络拓扑结构 3. NAT技术详解 3.1. 概述 3.2. NAT的优劣势 3.3. NAT穿透常见解决方案 3.4. 探针打洞基本原理 3.4.1. 基本原理 3.4.2. 同一个NAT网关内…

2023年企业云盘排行榜,这些产品值得尝试!

在当今信息技术高度发达的时代,企业对于信息的存储和管理需求越来越高。因此,企业云盘逐渐成为了企业存储与管理的重要组成部分。企业云盘能够实现多设备共享、远程控制、安全备份、合作办公等多种功能,方便高效地解决企业内部信息管理问题。…

【AIGC】17、MM-OVOD | 同时使用文本示例和图像示例来指导分类

文章目录 一、背景二、方法2.1 框架总览2.1.1 Text-based classifiers from language descriptions2.1.2 Vision-based Classifiers from Image Exemplars2.1.3 Constructing Classifiers via Multi-Modal Fusion 三、效果3.1 数据集3.2 实现细节3.3 开集目标检测结果 论文&…