W3cubDocs

/webpack 2

val-loader

Install

npm install val-loader --save-dev

Examples

If you have a module findAnswer.js like this:

function findAnswer() {
    return {
        code: 'module.exports = 42;'
    };
}

module.exports = findAnswer;

you can use the val-loader to generate source code on build time:

// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: require.resolve('path/to/findAnswer.js'),
            use: [{
                loader: 'val-loader'
            }]
        }]
    }
};

A complete example of all available features looks like this:

const ask = require('./ask.js');
const generateResult = require('./generateResult.js');

function findAnswer(options) {
    return ask(options.question)
        .then(generateResult)
        .then(result => ({

            code: result.code,
            sourceMap: result.sourceMap,
            ast: result.abstractSyntaxTree,

            // Mark dependencies of findAnswer().
            // The function will be re-executed if one of these
            // dependencies has changed in watch mode.
            dependencies: [
                // Array of absolute native paths!
                require.resolve('./ask.js'),
                require.resolve('./generateResult.js')
            ],

            // Flag the generated code as cacheable.
            // If none of the dependencies have changed,
            // the function won't be executed again.
            cacheable: true

        }));
}

module.exports = findAnswer;
// webpack.config.js
module.exports = {
    ...
    module: {
        rules: [{
            test: require.resolve('path/to/findAnswer.js'),
            use: [{
                loader: 'val-loader',
                options: {
                    question: 'What is the meaning of life?'
                }
            }]
        }]
    }
};

Usage

The module that is loaded with this loader must stick to the following interfaces:

Expected module interface

The loaded module must export a function as default export with the following function interface.

module.exports = function (...) { ... };

Modules transpiled by Babel are also supported.

export default function (...) { ... }

Expected function interface

The function will be called with the loader options and must either return:

  • an object with the following object interface or
  • a promise that resolves to the following object interface

Expected object interface

Property
Type
Description
Property
code
Type
`string
Description
Buffer`
Required. The code that is passed to the next loader or to webpack.
Property
sourceMap
Type
Description
Optional. Will be passed to the next loader or to webpack.
Property
ast
Type
any
Description
Optional. An Abstract Syntax Tree that will be passed to the next loader. Useful to speed up the build time if the next loader uses the same AST.
Property
dependencies
Type
Array<string>
Description
Default: []. An array of absolute, native paths to file dependencies that need to be watched for changes.
Property
cacheable
Type
boolean
Description
Default: false. Flag whether the code can be re-used in watch mode if none of the dependencies have changed.

Loader Options

The val-loader itself has no options. The options are passed as they are (without cloning them) to the exported function.

© 2012–2016 Tobias Koppers
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/val-loader/