Conditional Preprocessor for Webpack

1.0.2 · abandoned · verified Tue Apr 21

if-loader is a webpack module bundler preprocessor that enables C-style conditional compilation using 'if' directives within JavaScript source files. It allows developers to include or exclude blocks of code based on predefined conditions, similar to the `#ifdef` mechanism in C/C++. The current stable version is 1.0.2. This package is no longer maintained, with its last commit dating back over nine years, indicating it is abandoned. While it offers a straightforward way to manage code variants for different build environments, more actively maintained alternatives exist that provide similar or enhanced functionality and better integration with modern webpack features and tooling. Its primary differentiation was its minimalist approach to conditional code exclusion using comment-based directives.

Common errors

```
Module not found: Error: Can't resolve 'if-loader' in '<path>'
```
cause The 'if-loader' package is not installed or Webpack cannot locate it.

fix Install the package: `npm install if-loader --save-dev` or `yarn add if-loader --dev`.
```
Error: Cannot read properties of undefined (reading 'replace') at Object.module.exports (<path>/if-loader/index.js:XX:YY)
```
cause The loader's options are not correctly passed, or a required option for a directive is missing, leading to an undefined value in its internal processing.

fix Verify the `options` object within your `webpack.config.js` for `if-loader` is correctly structured and that all directives referenced in your code (e.g., `version-a`) have a corresponding boolean value in the options.

Warnings

breaking The `if-loader` package is effectively abandoned, with no activity on its GitHub repository for over nine years. This means no updates, bug fixes, or security patches will be released. Consider migrating to more actively maintained conditional compilation loaders for Webpack.
Fix: Evaluate alternative loaders like `if-webpack-loader` or `js-conditional-compile-loader`, which offer similar functionality and active maintenance.
gotcha The loader's conditional logic operates on comments and is not aware of JavaScript string literals. Placing directives like `// #if` inside a string (e.g., `"Hello, // #if world!"`) can lead to unexpected parsing errors or incorrect code removal.
Fix: Ensure that conditional compilation directives are only used outside of string literals. Use dedicated preprocessor variables or configurations for string-based conditional content if needed.
gotcha Since `if-loader` performs a raw text transformation by removing comment blocks, it can interfere with other loaders or tools that also process or rely on comment syntax, such as code formatters, linters (e.g., ESLint), or minifiers, potentially leading to errors or unexpected behavior.
Fix: Place `if-loader` early in the loader chain (before linting or minification) to ensure it processes the directives before other tools. Test thoroughly when combining with other comment-sensitive tools.

Install

npm install if-loader npm
yarn add if-loader yarn
pnpm add if-loader pnpm

Imports

if-loader
wrong:
```
import ifLoader from 'if-loader';
```
correct:
```
module: { rules: [{ test: /\.js$/, use: [{ loader: 'if-loader', options: { 'version-a': true } }] }] }
```
Webpack loaders are configured in `webpack.config.js` via their string name and optional configuration object. There is no direct JavaScript import for the loader itself into application code.
Conditional Block (line comment)
wrong:
```
/* #if SOME_CONDITION */ console.log('This will not be processed correctly in single-line comment format.');
```
correct:
```
// #if SOME_CONDITION
console.log('This code is conditional.');
// #end
```
Directives can use either single-line (`// #if`) or multi-line (`/* #if */`) comment syntax. The `options` in webpack config define the conditions.
Conditional Block (block comment)
wrong:
```
if (SOME_CONDITION) { ... }
```
correct:
```
/* #if SOME_CONDITION */
(function() {
  console.log('Multi-line conditional block.');
})();
/* #end */
```
The loader processes comment directives at build time, removing the code blocks entirely if the condition is false. This is a build-time transformation, not runtime conditional execution.

Quickstart

Demonstrates configuring `if-loader` in `webpack.config.js` to conditionally include or exclude code blocks in `app.js` based on environment variables passed as options to the loader. This allows generating different bundles from the same source code.

/* webpack.config.js */
const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          {
            loader: 'if-loader',
            options: {
              'version-a': process.env.BUILD_ENV === 'alpha',
              'version-b': process.env.BUILD_ENV === 'beta',
              'version-c': true // Always enabled
            },
          },
        ],
      },
    ],
  },
};

/* src/app.js */
console.log('Common code.');

/* #if version-a */
console.log('This is for version-a build.');
/* #end */

// #if version-b
console.log('This is for version-b build.');
// #end

/* #if version-a,version-c */
console.log('This is for version-a OR version-c build.');
/* #end */

// #if version-d
console.log('This will never be included.');
// #end


// To run:
// BUILD_ENV=alpha webpack --config webpack.config.js
// BUILD_ENV=beta webpack --config webpack.config.js
// webpack --config webpack.config.js (for version-c only)

view raw JSON →