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.
The target module is called with two arguments: (options, loaderContext)
options
: The loader options (for instance provided in the webpack config. See the example below).loaderContext
: The loader context.
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 = (options, loaderContext) => {
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 a Function
that returns an object,
or a Promise
resolving an object (e.g. async function), 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.
Dependencies can also be added using loaderContext.addDependency(file: string)
.
contextDependencies
Type: Array[String]
Default: []
An array of absolute, native paths to directory dependencies that should be
watched by webpack for changes.
Context dependencies can also be added using loaderContext.addContextDependency(directory: string)
.
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;
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:
const tenYearsMs = require('years-in-ms');
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