- 0133技术站
- 联系QQ：18840023
- QQ交流群
- 微信公众号
云罗郡主
更新时间：2019-01-16 10:42:24
执行给定模块以在构建时生成源代码
npm i -D val-loader
此 loader 所加载的模块必须符合以下接口
加载的模块必须使用以下函数接口，将 default export 导出为一个函数。
module.exports = function () {...};Modules transpiled by Babel are also supported
export default function () {...};Function InterfaceThe 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'
}
]
}
]
}
};CompleteA 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?'
}
}
]
}
]
}
};
推荐手册