How to remove console.log (or custom debug functions) from production builds with Webpack

And in this way Jimmy lost his job as Junior web developer in a random company. I know a lot of people (that includes me) that like to write stupid things in the debug functions while they work only to remember what the line does as someway the following lines are easily to remember and write that "Left side drawer component > disableOption > Checkbox test":

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.`);

Well, not enough to write an entire joke ... but something like that, i hope you understand.

In this article you will learn how to remove the console.log function (or any custom debug function) from your webpack production build.

1. Install the webpack-strip module

Webpack-strip is a simple Webpack loader that strip custom functions from your code. This can be very useful if you want to use debug statements while developing your app but don't want this info exposed in your production code (just perfect to remove stupid things from production).

To install this module in your project, execute the following command in a terminal:

npm install --save-dev strip-loader

For more information about this module, please visit the official Github repository here. This module was written by the guys at Yahoo.

2. Using the module

Let's suppose that you want have a custom method named debug that you don't want to expose in your production builds:

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';
};

As you can see, the debug method and console.log would show something in the console. To remove them from our project (not the source code but the production builds) we would simply add the webpack-strip loader. Start by opening your webpack-production.config.js file and add the loader with the way you want:

Using strip-loader as a library

This is the preferred method as it's pretty easy to read, you can provide many arguments to the loader functions e.g console.info, console.warn, console.dir etc.

const WebpackStrip = require('strip-loader');

const config = {
    ... 

    module: {
        loaders: [
            // ... Start loader
            {
                test: /\.js$/,
                loader: WebpackStrip.loader('debug', 'console.log')
            }
            // ... End loader 
        ]
    }

    ...
};

3. Replacing module

Note that if the plugin will replace your custom function, however it will still required in the final bundle. That means that you need to still to have a debug function, however it should be just an empty function. You can achieve it using the NormalModuleReplacementPlugin of WebPack.

Create an empty file that will contain an empty function:

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

And then in your webpack configuration, specify that the debug module is just an empty function:

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

Happy coding !