inspect-loader

inspect-loader

Webpack loader designed for loader testing and debugging. Calls a function with the received input.

Install

npm install --save-dev inspect-loader

Example

Put the inspect-loader in front of the loader you want to test and pass in a callback function. The callback function will be called with useful information about the given inputs (arguments). It also exposes the internal loader context for further inspection:

webpack({
    ...
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: "inspect-loader",
                options: {
                    callback(inspect) {
                         console.log(inspect.arguments);
                         console.log(inspect.context);
                         console.log(inspect.options);
                    }
                }
            }, {
                loader: "my-loader" // loader that you want to test/debug
            }]
        }]
    }
});

The loader returns the received arguments, which means that you can place the inspect-loader in the middle of your loader pipeline. You can even inspect multiple loaders:

webpack({
    ...
            use: [{
                loader: "inspect-loader",
                options: {
                    callback: inspectALoader
                }
            }, {
                loader: "a-loader"
            }, {
                loader: "inspect-loader",
                options: {
                    callback: inspectBLoader
                }
            }, {
                loader: "b-loader"
            }]
    ...
});

Raw

This package exposes also a raw version that can be used to test raw loaders:

webpack({
    ...
    module: {
        rules: [{
            test: /\.js$/,
            use: [{
                loader: "inspect-loader/raw",
                options: {
                    callback(inspect) {
                         console.log(inspect.arguments[0] instanceof Buffer); // true
                    }
                }
            }, {
                loader: "my-raw-loader" // raw loader that you want to test/debug
            }]
        }]
    }
});

Options

callback: Function | string

Can be a Function (preferred) or a string. In case it's a string, it is treated as a string reference and will be invoked on the inspectLoader.callbacks object like this:

const inspectLoader = require("inspect-loader");

inspectLoader.callbacks.myCallback = function () { ... };

webpack({
    ...
                loader: "inspect-loader",
                options: {
                    callback: "myCallback"
                }
    ...
});

The callback passes an inspect object as single argument that exposes the internal loader state:

{
    arguments, // A true array that carries all the input arguments that were passed to the loader
    context, // A reference to the loaderContext of the inspect-loader
    options // A reference to the options object of the inspect-loader
}

function callback(inspect) {
    console.log(inspect.arguments); // ["loader contents from the previous loader"]
    console.log(inspect.context); // { resource: "...", ... }
    console.log(inspect.options); // { callback: [Function] }
}

Please note: context and options are not references to the loaderContext of the loader you want to test. They just expose the internal state of the inspect-loader. This is useful if you have multiple callbacks and you want to find out which resource or loader pipeline has been invoked.

Usage

Assertions

Most of the time, you will probably want to do assertions on the inspect object. It is recommended to do this after the webpack compilation has finished, because otherwise the assertion error will be caught by webpack and reported as Module build error.

Not so good:

    ...
    loader: "inspect-loader",
    options: {
        callback(inspect) {
            // assertion errors will be caught as Module build error
            assert.deepEqual(inspect.arguments, [...])
        }
    }
    ...

Better:

let args;

webpack({
    ...
    loader: "inspect-loader",
    options: {
        callback(inspect) {
            args = inspect.arguments;
        }
    }
    ...
}, (err, stats) => {
    ...
    assert.deepEqual(args, [...])
});
    

License

Unlicense

Sponsors