webpack-conditional-loader

Inspired by C conditionals directive, conditional loader decides if a given block should be included in the final bundle.

Useful for removing instrumentation code and making your final production bundle smaller (therefore faster).

Installation

npm install --save-dev webpack-conditional-loader

Usage

In your webpack.config.js

Put webpack-conditional-loader as the last loader in the array, so it will process the code before all others.

module: {
  rules: [{
    test: /\.js$/,
    use: ['babel-loader', 'webpack-conditional-loader']
  }]
}

Get an example config file here

On your code

Use // #if expression and // #endif to wrap blocks of code you want to be removed if a given predicate is false.

// #if process.env.NODE_ENV === 'DEVELOPMENT'
console.log('lorem')
console.log('ipsum')
// #endif

In the example above, the code will be removed if the enviroment variable NODE_ENV is not DEVELOPMENT, removing unnecessary code from your production bundle.

The same technique can be used to prevent loading packages in the production bundle.

// #if process.env.NODE_ENV !== 'BUILD'
import reduxLogger from 'redux-logger'
// #endif

You can pass variables as options to the loader:

// webpack.config.js
module: {
  rules: [{
    test: /\.js$/,
    use: [
      'babel-loader',
      {
        loader: 'webpack-conditional-loader',
        options: {
          isReady: true
        }
    ]
  }]
}

// myFile.js
// #if isReady
console.log(`I'm ready!`)
// #endif

Credits

• GCC C conditional documentation

---

caiogondim.com  ·  GitHub @caiogondim  ·  Twitter @caio_gondim