Skip to content
Webpack loader designed for loader testing and debugging. Calls a function with the received input.
Branch: master
Clone or download
Latest commit bac6c16 Mar 14, 2017
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
lib Add raw version of inspect-loader Mar 10, 2017
test
.editorconfig
.eslintrc.json
.gitignore
.nycrc Finish first shot Mar 10, 2017
.travis.yml
LICENSE Initial commit Mar 10, 2017
README.md
appveyor.yml Add appveyor.yml Mar 10, 2017
package.json Add lint script to posttest scripts Mar 13, 2017
raw.js

README.md

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

You can’t perform that action at this time.