[![npm][npm]][npm-url] [![node][node]][node-url] [![deps][deps]][deps-url] [![tests][tests]][tests-url] [![chat][chat]][chat-url]
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.
This module requires a minimum of Node v6.9.0 and Webpack v4.0.0.
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('test-file');
And run webpack via your preferred method.
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.
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