<万博manbetx平台> val-loader - webpack 中文文档(v4.15.1) - 万博manbetx平台中文网
购物车
登陆 / 注册
微信扫码登陆

推荐手册

val-loader

执行给定模块以在构建时生成源代码

安装

npm i -D val-loader

用法

此 loader 所加载的模块必须符合以下接口

#

加载的模块必须使用以下函数接口,将  default export 导出为一个函数。

module.exports = function () {...};

Modules transpiled by are also supported

export default function () {...};

Function Interface

The function will be called with the loader and must either return

{Object}

Following the Object Interface

{Promise}

Resolving to an {Object} following the Object Interface

Object Interface

NameTypeDefaultDescription
code`{String\Buffer}`undefined(Required) The code that is passed to the next loader or to webpack
sourceMapundefined(Optional) Will be passed to the next loader or to webpack
ast{Array<{Object}>}undefined(Optional) An 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}falseFlag whether the code can be re-used in watch mode if none of the dependencies have changed

Options

val-loader itself has no options. The options are passed as they are (without cloning them) to the exported function

Examples

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?'
            }
          }
        ]
      }
    ]
  }
};
网站导航
标签地图
学习路径
视频教程
开发软件
旗下子站
技术文章
文档工具
关于我们
企业合作
人才招聘
联系我们
讲师招募
QQ交流群
QQ官方交流群
微信公众号
微信公众号