{"id":20810,"library":"webpack-preprocessor-loader","title":"webpack-preprocessor-loader","description":"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.","status":"active","version":"1.3.0","language":"javascript","source_language":"en","source_url":"https://github.com/afterwind-io/preprocessor-loader","tags":["javascript","webpack","loader","preprocessor","preprocess","precompile"],"install":[{"cmd":"npm install webpack-preprocessor-loader","lang":"bash","label":"npm"},{"cmd":"yarn add webpack-preprocessor-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add webpack-preprocessor-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"peer dependency; loader requires Webpack >=4","package":"webpack","optional":false},{"reason":"runtime requirement: Node >=6.11.5 (aligned with Webpack 4)","package":"node","optional":false}],"imports":[{"note":"This package has a default export, so named destructure will result in undefined.","wrong":"import { PreprocessorLoader } from 'webpack-preprocessor-loader';","symbol":"default","correct":"import PreprocessorLoader from 'webpack-preprocessor-loader';"},{"note":"The loader is used via Webpack config, not imported directly in application code.","wrong":"","symbol":"resolve-loader-options","correct":"const { resolve } = require('path');"},{"note":"In CJS, the default export is the whole module.exports object, so .default is incorrect.","wrong":"const PreprocessorLoader = require('webpack-preprocessor-loader').default;","symbol":"require-style","correct":"const PreprocessorLoader = require('webpack-preprocessor-loader');"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: [\n          'babel-loader',\n          {\n            loader: 'webpack-preprocessor-loader',\n            options: {\n              debug: process.env.NODE_ENV !== 'production',\n              directives: {\n                secret: false\n              },\n              params: {\n                ENV: process.env.NODE_ENV || 'development'\n              },\n              verbose: false\n            }\n          }\n        ]\n      }\n    ]\n  }\n};\n\n// In your source file (index.js):\n// #!if ENV === 'production'\nconsole.log('Production build');\n// #!else\nconsole.log('Development build');\n// #!endif\n\n// #!debug\nconsole.log('Debug info');\n\n// #!secret\nconst secretKey = '12345';\n\n// Output when NODE_ENV=production:\n// console.log('Production build');\n// (debug block removed, secret block removed)","lang":"javascript","description":"Webpack config and source showing conditional compilation with directives (if/else, debug, custom) using the loader's options."},"warnings":[{"fix":"Place directive on its own line: // #!directive","message":"Directives must not appear inline; they must be on their own line.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Put webpack-preprocessor-loader at the end of the use list, after all other loaders.","message":"The loader must be the last loader in the 'use' array for the rule.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Upgrade to v1.1.1+ or ensure files end with a newline.","message":"The last line of the file may be omitted if it does not end with a newline character (fixed in v1.1.1).","severity":"gotcha","affected_versions":">=1.1.0 <=1.1.0"},{"fix":"Upgrade to v1.1.4+ or avoid arrays in params.","message":"Array values in params may break #!if / #!elseif assertions (fixed in v1.1.4).","severity":"gotcha","affected_versions":">=1.0.0 <=1.1.3"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"npm install webpack-preprocessor-loader --save-dev","cause":"Loader not installed or missing from package.json.","error":"Module not found: Error: Can't resolve 'webpack-preprocessor-loader'"},{"fix":"Upgrade to v1.1.4+ where arrays are handled correctly, or use scalar values.","cause":"Using arrays as parameter values in params option causes type mismatch in condition evaluation.","error":"Array values in `params` break the `#!if / #!elseif` assertion"},{"fix":"Upgrade to v1.1.1+ where this bug was fixed, or ensure files end with newline.","cause":"The loader expects newline at end of file.","error":"The last line of the file will be incorrectly omitted if no new-line char presents as EOF"}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}