webpack-preprocessor

0.1.12 verified Sat Apr 25 auth: no javascript abandoned

A webpack loader that strips or keeps code blocks based on preprocessor directives like `#if`, `#elif`, `#else`, `#endif`, supporting JavaScript and HTML files. It uses a declarative syntax similar to C preprocessor. Version 0.1.12 is the latest, but the project appears unmaintained (last commit years ago). Key differentiators: simple condition syntax, supports nested logic, and works with webpack 1/2 loaders. Alternatives like preprocess-loader or webpack-strip-block may be more modern.

Common errors

error Error: Cannot find module 'webpack-preprocessor' ↓

cause Package not installed or not in node_modules.

fix

Run npm install webpack-preprocessor --save-dev.

error Module build failed: Error: 'definitions' must be a valid JSON array ↓

cause The query string options are not properly JSON-encoded.

fix

Use ?definitions='["dev"]' or use options object with webpack 4+.

Warnings

deprecated webpack-preprocessor uses legacy webpack loader API (v1/v2), not compatible with webpack 5 pipeline. ↓

fix Use a modern loader like preprocess-loader or write inline loaders.

gotcha Complex condition expressions with both && and || operators are not supported; only simple conjunctions or disjunctions work. ↓

fix Use nested conditions or chain multiple #if directives.

gotcha The loader expects definitions as a JSON array string. Non-serialized string will cause runtime errors. ↓

fix Pass definitions as valid JSON array: definitions='["dev","stage"]'

deprecated No updates since 2015; project is effectively abandoned. ↓

fix Consider migrating to an actively maintained alternative.

Install

npm install webpack-preprocessor

yarn add webpack-preprocessor

pnpm add webpack-preprocessor

Imports

default

wrong

const webpackPreprocessor = require('webpack-preprocessor'); // works in CommonJS, but loader config uses string

correct

import webpackPreprocessor from 'webpack-preprocessor'; // as webpack loader rule

Loaders are typically referenced by name in webpack config, not imported. If imported, use default.

loader

wrong

{ test: /\.js$/, use: ['webpack-preprocessor'] } // not a webpack loader function, use string form

correct

{ test: /\.js$/, loader: 'webpack-preprocessor' }

This is a legacy loader for webpack 1-4. In webpack 5, use 'use' array with string.

query options

wrong

loader: 'webpack-preprocessor?definitions=dev,stage' // must be JSON array string

correct

loader: 'webpack-preprocessor?definitions=["dev","stage"]'

Options are passed as query string. For complex values, use JSON.stringify.

Quickstart

Set up webpack loader config and use preprocessor directives in JS files to conditionally include code based on definitions.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: [
          { loader: 'webpack-preprocessor', options: { definitions: ['dev'] } }
        ]
      }
    ]
  }
};
// In source:
/*#if dev*/
console.log('development build');
/*#endif*/