simple-functional-loader

1.2.1 verified Sat Apr 25 auth: no javascript

Allows using a JavaScript function as a Webpack loader configuration option. Version 1.2.1 simplifies custom inline loaders by wrapping a function into a loader path and options. The package is stable but has seen infrequent updates, with v1.1.2 fixing a security issue. Most development happens in the webpack ecosystem itself.

Common errors

error TypeError: loader is not a function ↓

cause Using arrow function which doesn't have 'this' binding.

fix

Replace arrow function with a regular function expression.

error Module not found: Error: Can't resolve 'simple-functional-loader' ↓

cause Package not installed or missing from devDependencies.

fix

npm install simple-functional-loader --save-dev

error Error: Cannot find module './path/to/loader' ↓

cause Using createLoader without a function argument or invalid path.

fix

Ensure createLoader receives a function as the only argument.

Warnings

gotcha The function passed to createLoader must be an 'ES5' function (not arrow) to access the loader context via 'this'. ↓

fix Use function() { ... } instead of () => { ... }.

deprecated The package has not been updated since 2019; webpack 5 compatibility is not guaranteed. ↓

fix Test with webpack 5; consider using webpack's built-in loader.

breaking v1.1.2 fixed a security issue; upgrade from earlier versions. ↓

fix Update to version >=1.1.2.

Install

npm install simple-functional-loader

yarn add simple-functional-loader

pnpm add simple-functional-loader

Imports

createLoader

wrong

import createLoader from 'simple-functional-loader'

correct

import { createLoader } from 'simple-functional-loader'

The package exports createLoader as a named export, not default.

createLoader (CJS)

wrong

const createLoader = require('simple-functional-loader')

correct

const { createLoader } = require('simple-functional-loader')

CJS destructured import is required; direct assignment gives an object.

inline loader usage
```
import source from '!simple-functional-loader!./file.txt'
```
When used as an inline loader, prepend with '!' to avoid other loaders.

Quickstart

Demonstrates wrapping a custom function as a webpack loader using createLoader.

// webpack.config.js
const { createLoader } = require('simple-functional-loader');

module.exports = {
  module: {
    rules: [
      {
        test: /\.txt$/,
        use: createLoader(function(source) {
          // This function runs as a webpack loader.
          // 'this' is the loader context.
          return source.toUpperCase();
        })
      }
    ]
  }
};