apply-loader

2.0.0 verified Sat Apr 25 auth: no javascript

Webpack loader that executes an exported JavaScript function (default or module.exports) with optional arguments and returns the exported value. Current stable version 2.0.0, maintained as of last release. Unlike conventional loaders that transform source code, it invokes the target module as a factory function. Supports both webpack 1 and 2 configuration syntax.

Common errors

error Error: apply-loader?args[]=1: The provided value "args[]" is not a valid request parameter. ↓

cause Using query string syntax with webpack 2+ without proper encoding or using 'use' array incorrectly.

fix

Use options object: { loader: 'apply-loader', options: { args: [1] } }

error Module build failed: TypeError: apply is not a function ↓

cause Target module does not export a function (exports an object, string, etc.).

fix

Ensure the target module exports a function: module.exports = function(...) {...}

Warnings

breaking v2.0.0 stops triggering loader-utils deprecation warning ↓

fix Upgrade to v2.0.0

deprecated Query string syntax (e.g., ?args[]=1) is deprecated in webpack 2+ ↓

fix Use options object in webpack config

gotcha If the target module exports both default and named, apply-loader calls the default export first ↓

fix Ensure your module exports a function as default or module.exports

Install

npm install apply-loader

yarn add apply-loader

pnpm add apply-loader

Imports

apply-loader
wrong
```
import apply from 'apply-loader';
```
correct
```
const apply = require('apply-loader');
```
This is a webpack loader, not a JS module. It is used in webpack config, not imported in application code.
Use in webpack config (webpack 1)
wrong
```
{ test: /\.js$/, use: 'apply-loader?args[]=1' }
```
correct
```
{ test: /\.js$/, loader: 'apply-loader?args[]=1' }
```
In webpack 1, use 'loader'; in webpack 2+, use 'use' with options object.

Use in webpack config (webpack 2+)

wrong

{ test: /\.js$/, loader: 'apply-loader?args[]=1' }

correct

{ test: /\.js$/, use: { loader: 'apply-loader', options: { args: [1] } } }

Webpack 2+ prefers options object over query string.

Quickstart

Configures apply-loader to invoke greet.js with arguments and export the return value.

// webpack.config.js
module.exports = {
  entry: './app.js',
  output: { filename: 'bundle.js' },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'apply-loader',
          options: {
            args: ['hello', { foo: 'bar' }]
          }
        }
      }
    ]
  }
};

// greet.js (target module)
function greet(greeting, options) {
  return `${greeting} ${options.foo}`;
}
module.exports = greet;

// Result: bundle exports 'hello bar'