[![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
© JS Foundation and other contributors
Licensed under the Creative Commons Attribution License 4.0.
https://webpack.js.org/loaders/val-loader