cleanup-debug-loader

It's just couple of regex in build process to filter out lines or blocks of unnecessary code depending on running evironment (development or production). It allow you not to cary about cleaning out debug code from production. Now instead of

if(node.ENV === 'development'){
  console.log('blablabla');
}

you just can write

#- console.log('...');

Installation

npm i --save-dev cleanup-debug-loader

webpack.config.js

It must be the last js loader in pipeline, or you get a syntax error

{
  module: {
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      loader: 'any-other-js-loader',
    },{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{ loader: 'cleanup-debug-loader') }],
    }],
  },
};

Configuration

Loader supports several options. To recognize if this is development environment, mode option should be presented in webpack configuration. You can also change start marker (default is #) and hallmarks for dev and nondev modes (defaults + and -) with a

little attention

All options are injected directly into regexp. So if changing defaults, do it with caution if using special regexp characters (should be wrapped with square brackets).

Configuration example:

{
  module: {
    mode: 'development',
    rules: [{
      test: /\.js$/,
      exclude: /node_modules/,
      use: [{
        loader: 'cleanup-debug-loader',
        options: {
          marker: '@@',  // change default
          dropInDev: '[$]', // it's regexp special
          dropInProd: 'p',
        }
      }],
    }],
  },
}; 

Usage

Prepend lines you wish to keep only in dev mode with #- (any whitespace allowed). If there is something you want to strip out from development, prepend it with with #+. You can also wrap entire blocks as shown below. Nesting is not supported.

#- console.log('This line will be keeped only in development')

#+ console.log('This line will be dropped from development')

#-[
console.log('This entire block will')
console.log('be keeped only in development')
#-]

#+[
console.log("Hello, I'm turtle")
#+]

Warning!

Loader relies on _compilation property of loader context https://webpack.js.org/api/loaders/#this-_compilation. Webpack is not recommending to do so. But it's still working for now, and I'm ok with that. If you know more righteous way to solve this problem, please leave a comment or contact me!

Thanks and enjoy!