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

本文概述

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

这样, 吉米就失去了在一家随机公司担任初级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 function
    return '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来实现。

创建一个将包含一个空函数的空文件：

// emptyDebug.js
module.exports = function() { return new Function(); };

然后在你的webpack配置中, 指定调试模块只是一个空函数：

{
    plugins: [
        new webpack.NormalModuleReplacementPlugin(/debug/, process.cwd() + '/emptyDebug.js'), ]
}

编码愉快！