[![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