webpack-run-loader

Info

A webpack loader that executes function exported by previous loader and exports or returns its result or the original function bound to context and arguments. It is a mix of apply-loader and extract-loader. See Options for more details.

Reasoning / Alternatives

You probably can get away with using apply-loader with extract-loader. The reason why this loader was made is a specific scenario where a loader exports a function but also uses imports inside the script (e.g. pug-loader). This doesn't play nice with extract-laoder because of the way it replaces imports (as it wasn't meant for this scenario I guess).

Install

npm i webpack-run-loader
yarn add webpack-run-loader

Usage

For demonstration purposes let's say a loader uses this script to export a function:

const runtime = require("some-runtime");
 
module.exports = function(optionalArg) {
    doSomeStuff();
 
    const context = this.createContext(optionalArg);
 
    return runtime.yay(context);
}

Options

You can specify loader options the regular way in your webpack config:

{
    ...
    module: {
        ...
        {
            loader: "webpack-run-loader",
            options: {
                ...
            }
        }
    }
    ...
}

• mode: ("run" | "bind")
• export: boolean
• stringify: boolean
• context: (loaderContext) => any
• args: array

mode: ("run" | "bind")

Specifies the mode of the loader:

• run: Actually runs the exported function and returns/exports its result
• bind: Binds the exported function to optional context and args and exports (forces export to true) the bound function

Default is run.

export: boolean

Specifies whether the loader exports or returns the result of exported function. Default is false.

• true makes webpack-run-loader behave the same way as apply-loader. Note that args option isn't fully compatible
• false makes webpack-run-loaderbehave the same way as extract-loader with the exception, that it extracts the result of the function call instead of the source of the module.

Usually you want to set export to true if you need to further process the result in other loaders and you want to set it to false if you want to extract the result into a file (e.g. with file-loader)

Example (true)

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                createContext(optionalArg) {
                    ....
                }
            };
        },
        export: true
    }
}
 
// webpack-run-laoder will act as a "pitching" laoder
// and returns a script like the one below, same as apply-loader:
 
...
var req = require(/* remaining reuest in the loader chain */);
module.exports = (req["default"] || req).apply(/* context */, /* array of args */);
 

Example (false)

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                createContext(optionalArg) {
                    ....
                }
            };
        },
        export: false // default
    }
}
 
// webpack-run-laoder will return the raw result of the exported function.
 

Read more about loaders and pitching loaders.

stringify: boolean

Specifies whether the exported function's result will be ran through JSON.stringify or not. Default is false.

context: (loaderContext) => any

Function that returns context that will be exposed as this while running the exported function. This might be useful when you want to return the result of the function (export false) and you know the exported function is using this and you need to provide it.

Signature

(loaderContext) => any where loaderContext is webpack's loader context

Example

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                // we need to provide createContext in order for the script to work
                createContext(optionalArg) {
                    ....
                }
            };
        }
    }
}

args: Array

Array of arguments passed to exported function when executing it.

Example

{
    loader: "webpack-run-loader",
    options: {
        context: (ctx) => {
            return {
                createContext(optionalArg) {
                    // optionalArg will be ourOptionalArg
                    ....
                }
            };
        },
        args: [ourOptionalArg]
    }
}

Contributing

All PRs are welcome! Note that conventional changlog/standard version is used for versioning and commit messages.

Roadmap

• More thorough tests
• Support for scripts using ES import/export declarations