如何使用Webpack从生产版本中删除console.log(或自定义调试功能) _Webpack

本文概述

1.安装webpack-strip模块
2.使用模块
3.更换模块

如何使用Webpack从生产版本中删除console.log(或自定义调试功能)

文章图片
这样, 吉米就失去了在一家随机公司担任初级Web开发人员的工作。我知道很多人(包括我在内)喜欢在调试函数中编写愚蠢的东西, 而他们只能记住该行的功能, 因此以下几行很容易记住并写道：” 左侧抽屉组件> disableOption > 复选框测试” ：

console.log("bananas"); console.log("**** the police"); console.log("virgin until last night"); console.log("Pi?a colada"); console.log(`Am I pretty or ugly?Boyfriend: You're both. Girlfriend: What do you mean?Boyfriend: You're pretty ugly.`);

好吧, 还不足以写出整个笑话……但我希望你能理解。
在本文中, 你将学习如何从Webpack生产版本中删除console.log函数(或任何自定义调试函数)。
1.安装webpack-strip模块 Webpack-strip是一个简单的Webpack加载程序, 可从代码中剥离自定义功能。如果你想在开发应用程序时使用调试语句, 但又不想在生产代码中公开此信息(非常适合从生产中删除愚蠢的东西), 则这可能非常有用。
要在你的项目中安装此模块, 请在终端中执行以下命令：

npm install --save-dev strip-loader

有关此模块的更多信息, 请在此处访问官方的Github存储库。这个模块是由Yahoo的家伙编写的。
2.使用模块假设你要拥有一个不想在生产版本中公开的名为debug的自定义方法：
注意如果你的自定义方法需要作为其他文件中的模块, 则请确保检查步骤3。如果仅需要删除console.log和控制台的相关方法, 则只需执行此步骤, 即可开始操作。走。

var debug = require('debug'); var myAwesomeApplication = function () {// The following 3 lines will be stripped with the webpack loader debug('makeFoo called'); debug('makeFoo args', arguments); console.log("Bananas"); // This code would remain as it doesn't use the debug functionreturn 'Foo'; };

如你所见, 调试方法和console.log将在控制台中显示某些内容。要从我们的项目(不是源代码, 而是生产版本)中删除它们, 我们只需添加webpack-strip加载器。首先打开webpack-production.config.js文件, 然后使用所需的方式添加加载器：
将Strip-loader用作库
这是首选方法, 因为它很容易阅读, 你可以为加载器函数提供许多参数, 例如console.info, console.warn, console.dir等。

const WebpackStrip = require('strip-loader'); const config = {... module: {loaders: [// ... Start loader{test: /\.js$/, loader: WebpackStrip.loader('debug', 'console.log')}// ... End loader ]}...};

3.更换模块请注意, 如果该插件将替换你的自定义功能, 则最终捆绑包中仍将需要该插件。这意味着你仍然需要具有调试功能, 但是它应该只是一个空功能。你可以使用WebPack的NormalModuleReplacementPlugin来实现。
创建一个将包含一个空函数的空文件：