{"id":20277,"library":"preprocess-loader","title":"Preprocess Loader","description":"A webpack loader that uses the preprocess library to conditionally include or exclude code in HTML, JavaScript, CoffeeScript, and other module files based on custom or environment configurations. Version 0.3.0 is the latest stable release (the project appears inactive since 2017). It supports Webpack 1 and 2+ and allows overriding preprocess options via the `ppOptions` query parameter. Similar to gulp-preprocess, it provides directive syntax for conditional compilation (@if, @ifdef, @echo, @include). The loader is typically placed before other loaders in a chain to preprocess files before they are transpiled.","status":"maintenance","version":"0.3.0","language":"javascript","source_language":"en","source_url":"ssh://git@github.com/dearrrfish/preprocess-loader","tags":["javascript"],"install":[{"cmd":"npm install preprocess-loader","lang":"bash","label":"npm"},{"cmd":"yarn add preprocess-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add preprocess-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for text preprocessing (directives, conditionals).","package":"preprocess","optional":false},{"reason":"Peer dependency – loader operates within webpack's build system.","package":"webpack","optional":false}],"imports":[{"note":"As a webpack loader, it is not typically imported directly; it is configured in webpack.config via loader name string 'preprocess-loader'. The import pattern is uncommon but shown for completeness.","wrong":"const PreprocessLoader = require('preprocess-loader')","symbol":"default","correct":"import PreprocessLoader from 'preprocess-loader'"},{"note":"Webpack 2+ uses `rules` and `use` instead of `loaders`. The old `loaders` array is deprecated.","wrong":"module.exports = { module: { loaders: [ { test: /\\.js$/, loader: 'preprocess-loader?+DEBUG' } ] } }","symbol":"useLoader","correct":"module.exports = { module: { rules: [ { test: /\\.js$/, use: 'preprocess-loader?+DEBUG' } ] } }"},{"note":"Webpack 2+ supports the `options` object. Query string may still work but is less maintainable.","wrong":"use: [ { loader: 'preprocess-loader?DEBUG=true&NODE_ENV=production' } ]","symbol":"queryOptions","correct":"use: [ { loader: 'preprocess-loader', options: { DEBUG: true, NODE_ENV: 'production' } } ]"}],"quickstart":{"code":"// webpack.config.js\nmodule.exports = {\n  module: {\n    rules: [\n      {\n        test: /\\.js$/,\n        use: [\n          {\n            loader: 'preprocess-loader',\n            options: {\n              DEBUG: process.env.DEBUG === 'true' ? true : false,\n              NODE_ENV: process.env.NODE_ENV ?? 'production'\n            }\n          },\n          'babel-loader'\n        ]\n      }\n    ]\n  }\n};\n\n// In your source.js\nconst configValue = '/* @echo FOO */' || 'default value';\n\n// @ifdef DEBUG\nconsole.log('Debugging enabled');\n// @endif","lang":"javascript","description":"Webpack 2+ configuration using preprocess-loader with environment variables and Babel."},"warnings":[{"fix":"Place preprocess-loader earlier in the `use` array (right-to-left execution).","message":"Loader chain ordering matters: preprocess-loader should run before other loaders (e.g., babel-loader) to avoid preprocessed comments being transpiled away.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Chain two preprocess loaders: one with type:'cjsx' before CoffeeScript loader, one with type:'js' after.","message":"Directives inside @echo blocks may not be processed in coffee/shell type unless you apply a second preprocess pass after compilation.","severity":"gotcha","affected_versions":">=0.0.0"},{"fix":"Use `rules` with `use` array and `options` object.","message":"Webpack 1 style `loaders` array with query strings is deprecated in Webpack 2+.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Check preprocess v3 release notes for breaking changes; update your code if necessary.","message":"Upgrade from v0.1.0 to v0.2.0 updated preprocess from v2 to v3, which may change behavior of some directives.","severity":"breaking","affected_versions":"~0.1.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Run `npm install preprocess-loader --save-dev` or `yarn add preprocess-loader --dev`.","cause":"Missing npm install or not installed as devDependency.","error":"Cannot find module 'preprocess-loader'"},{"fix":"Replace `module.loaders` with `module.rules` and `loader` with `use`.","cause":"Using Webpack 2+ with the old `loaders` array instead of `rules`.","error":"Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema."},{"fix":"Add preprocess-loader to the `use` array before other loaders (e.g., before babel-loader).","cause":"preprocess-loader is not in the loader chain or is placed after a loader that removes comments.","error":"Module build failed: Error: You may need an appropriate loader to handle this file type."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}