webpack-preprocessor-loader

1.3.0 verified Sat Apr 25 auth: no javascript

A Webpack loader that enables conditional compilation in any text-based file. Current stable version is 1.3.0, released with support for nested if conditions, custom directives, verbose mode with escapeComments option, and builds on a rewritten codebase from v1.1.0+ that enhances multiline comment handling. It works as the last loader, processing raw text before other loaders, and supports JavaScript, HTML, CSS, and more. Unlike DefinePlugin, this loader physically removes code blocks based on directives, reducing bundle size. It requires Webpack 4+ and Node >=6.11.5.

Common errors

error Module not found: Error: Can't resolve 'webpack-preprocessor-loader' ↓

cause Loader not installed or missing from package.json.

fix

npm install webpack-preprocessor-loader --save-dev

error Array values in `params` break the `#!if / #!elseif` assertion ↓

cause Using arrays as parameter values in params option causes type mismatch in condition evaluation.

fix

Upgrade to v1.1.4+ where arrays are handled correctly, or use scalar values.

error The last line of the file will be incorrectly omitted if no new-line char presents as EOF ↓

cause The loader expects newline at end of file.

fix

Upgrade to v1.1.1+ where this bug was fixed, or ensure files end with newline.

Warnings

gotcha Directives must not appear inline; they must be on their own line. ↓

fix Place directive on its own line: // #!directive

gotcha The loader must be the last loader in the 'use' array for the rule. ↓

fix Put webpack-preprocessor-loader at the end of the use list, after all other loaders.

gotcha The last line of the file may be omitted if it does not end with a newline character (fixed in v1.1.1). ↓

fix Upgrade to v1.1.1+ or ensure files end with a newline.

gotcha Array values in params may break #!if / #!elseif assertions (fixed in v1.1.4). ↓

fix Upgrade to v1.1.4+ or avoid arrays in params.

Install

npm install webpack-preprocessor-loader

yarn add webpack-preprocessor-loader

pnpm add webpack-preprocessor-loader

Imports

default

wrong

import { PreprocessorLoader } from 'webpack-preprocessor-loader';

correct

import PreprocessorLoader from 'webpack-preprocessor-loader';

This package has a default export, so named destructure will result in undefined.

resolve-loader-options
```
const { resolve } = require('path');
```
The loader is used via Webpack config, not imported directly in application code.

require-style

wrong

const PreprocessorLoader = require('webpack-preprocessor-loader').default;

correct

const PreprocessorLoader = require('webpack-preprocessor-loader');

In CJS, the default export is the whole module.exports object, so .default is incorrect.

Quickstart

Webpack config and source showing conditional compilation with directives (if/else, debug, custom) using the loader's options.

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        use: [
          'babel-loader',
          {
            loader: 'webpack-preprocessor-loader',
            options: {
              debug: process.env.NODE_ENV !== 'production',
              directives: {
                secret: false
              },
              params: {
                ENV: process.env.NODE_ENV || 'development'
              },
              verbose: false
            }
          }
        ]
      }
    ]
  }
};

// In your source file (index.js):
// #!if ENV === 'production'
console.log('Production build');
// #!else
console.log('Development build');
// #!endif

// #!debug
console.log('Debug info');

// #!secret
const secretKey = '12345';

// Output when NODE_ENV=production:
// console.log('Production build');
// (debug block removed, secret block removed)