一、webpack中清除console的方法
当然想要清除console我们可以使用babel-loader结合babel-plugin-transform-remove-console插件来实现。
- 安装babel-loader和babel-plugin-transform-remove-console插件
npm install babel-loader babel-plugin-transform-remove-console -D
- 在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语句。上面的示例中保留了error和warn级别的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文章来源：https://www.toymoban.com/news/detail-500111.html
可以看到控制台干干净净什么都没有，说明我们自定义的清除console语句的loader生效啦。文章来源地址https://www.toymoban.com/news/detail-500111.html
到了这里，关于webpakc原理之开发一个清除console.log(xxx)的loader的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
