inspect-loader

    2.0.0 • Public • Published

    npm node npm-stats deps travis appveyor coverage

    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

    Install

    npm i inspect-loader

    DownloadsWeekly Downloads

    2,166

    Version

    2.0.0

    License

    Unlicense

    Unpacked Size

    10.3 kB

    Total Files

    5

    Last publish

    Collaborators

    • jhnns
    • peeri