自定义 loader 去删除全局console.log

本文介绍了如何创建自定义Webpack loader,通过正则表达式移除JavaScript代码中的console.log语句,提升代码压缩效率,并提供使用示例及UglifyJsPlugin的替代方案,帮助开发者深入理解Webpack的工作原理。
摘要由CSDN通过智能技术生成

思路就是,拿到代码中所有的 console.log(xxx),并对其进行删除,webpack 的 loader 本质上其实就是一个函数,我们可以在这个函数内部,根据正则匹配出我们想删除的字符串,对其进行替换。

自定义 loaders/ignore-console-log-loader.js 代码很简单,如下:

const reg = /(console.log\()(.*)(\))/;
gmodule.exports = function (sourceCode) { 
  return sourceCode.replace(reg, '');
}

使用姿势,在webpack.config.js 配置文件中添加一下自定义的 loader :

module: {  
 rules: [   
  {   test: /\.js$/,    
      loader: ['ignore-console-log-loader'],   
   },  
  ] 
 }, 
resolveLoader: {  // 指定自定义 loader 的位置目录  
 modules: ['node_modules', path.resolve(__dirname, 'loaders')] 
 },

另外使用UglifyJsPlugin 也可以,但是看网上很多采坑报错的文章,这种简单的自己写一下 更好, 加深webpack理解。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值