val-loader

A webpack loader which executes a given module, and returns the result of the execution at build-time, when the module is required in the bundle. In this way, the loader changes a module from code to a result.

Another way to view val-loader, is that it allows a user a way to make their own custom loader logic, without having to write a custom loader.

Getting Started

To begin, you'll need to install val-loader:

$ npm install val-loader --save-dev

Then add the loader to your webpack config. For example:

target-file.js

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

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /target-file.js$/,
        use: [
          {
            loader: `val-loader`,
          },
        ],
      },
    ],
  },
};

src/entry.js

const answer = require('target-file');

And run webpack via your preferred method.

Return Object Properties

Targeted modules of this loader must export either a Function or Promise that returns an object containing a code property at a minimum, but can contain any number of additional properties.

code

Type: String|Buffer Default: undefined Required

Code passed along to webpack or the next loader that will replace the module.

sourceMap

Type: Object Default: undefined

A source map passed along to webpack or the next loader.

ast

Type: Array[Object] Default: undefined

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.

dependencies

Type: Array[String] Default: []

An array of absolute, native paths to file dependencies that should be watched by webpack for changes.

contextDependencies

Type: Array[String] Default: []

An array of absolute, native paths to directory dependencies that should be watched by webpack for changes.

cacheable

Type: Boolean Default: false

If true, specifies that the code can be re-used in watch mode if none of the dependencies have changed.

Examples

In this example the loader is configured to operator on a file name of years-in-ms.js, execute the code, and store the result in the bundle as the result of the execution. This example passes years as an option, which corresponds to the years parameter in the target module exported function:

years-in-ms.js

module.exports = function yearsInMs({ years }) {
  const value = years * 365 * 24 * 60 * 60 * 1000;
  // NOTE: this return value will replace the module in the bundle
  return { code: 'module.exports = ' + value };
};

webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: require.resolve('src/years-in-ms.js'),
        use: [
          {
            loader: 'val-loader',
            options: {
              years: 10,
            },
          },
        ],
      },
    ],
  },
};

In the bundle, requiring the module then returns:

// ... bundle code ...

const tenYearsMs = require('years-in-ms'); // 315360000000

// ... bundle code ...

require('val-loader!tenyearsinms') == 315360000000;

Contributing

Please take a moment to read our contributing guidelines if you haven't yet done so.

CONTRIBUTING

License

MIT