Executes the given module to generate source code on build time
npm i -D val-loader
此 loader 所加载的模块必须符合以下接口
加载的模块必须使用以下函数接口,将 default
export 导出为一个函数。
module.exports = function () {...};
Modules transpiled by Babel are also supported
export default function () {...};
Function Interface
The function will be called with the loader options
and must either return
{Object}
Following the Object Interface
{Promise}
Resolving to an {Object}
following the Object Interface
Object Interface
Name | Type | Default | Description |
---|---|---|---|
code |
{String\|Buffer} |
undefined |
(Required) The code that is passed to the next loader or to webpack |
sourceMap |
{Object} |
undefined |
(Optional) Will be passed to the next loader or to webpack |
ast |
{Array<{Object}>} |
undefined |
(Optional) 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 |
{Array<{String}>} |
[] |
An array of absolute, native paths to file dependencies that need to be watched for changes |
contextDependencies |
{Array<{String}>} |
[] |
An array of absolute, native paths to directory dependencies that need to be watched for changes |
cacheable |
{Boolean} |
false |
Flag whether the code can be re-used in watch mode if none of the dependencies have changed |
val-loader
itself has no options. The options are passed as they are (without cloning them) to the exported function
If you have a module like this
answer.js
function answer () {
return {
code: 'module.exports = 42;'
}
};
module.exports = answer;
you can use the val-loader to generate source code on build time
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: require.resolve('path/to/answer.js'),
use: [
{
loader: 'val-loader'
}
]
}
]
}
};
Complete
A complete example of all available features looks like this
answer.js
const ask = require('./ask.js');
const generate = require('./generate.js');
function answer(options) {
return ask(options.question)
.then(generate)
.then(result => ({
ast: result.abstractSyntaxTree,
code: result.code,
// Mark dependencies of answer().
// The function will be re-executed if one of these
// dependencies has changed in watch mode.
dependencies: [
// Array of absolute native paths!
require.resolve('./ask.js'),
require.resolve('./generate.js')
],
// Flag the generated code as cacheable.
// If none of the dependencies have changed,
// the function won't be executed again.
cacheable: true
sourceMap: result.sourceMap,
})
);
}
module.exports = answer;
webpack.config.js
module.exports = {
...
module: {
rules: [
{
test: require.resolve('path/to/answer.js'),
use: [
{
loader: 'val-loader',
options: {
question: 'What is the meaning of life?'
}
}
]
}
]
}
};
Juho Vepsäläinen | Joshua Wiens | Kees Kluskens | Johannes Ewald |