skeleton loader - 左子网

骨架 加载器

WebPack的Loader模块执行您的自定义过程。它可以作为您的自定义加载程序。

默认情况下，骨架加载程序仅输出输入内容。指定功能时，骨架加载程序用输入内容执行您的功能，并输出其结果。该功能可以做某事，可能会编辑内容，它可能会解析内容并在控制台中指示某些内容，它可能会做任何其他事情。

也就是说，您可以在WebPack配置中指定功能，而不是编写新的自定义加载程序。

骨架加载器很有用：

您找不到想要的装载机。
您不想为您的项目编写特殊装载机。
您想在另一个加载程序的结果中添加一些东西。
您想进行其他编辑。
ETC。

例如：

 // webpack.config.js
module . exports = {
  entry : \'./app.js\' ,
  output : {
    filename : \'bundle.js\'
  } ,
  module : {
    rules : [ {
      test : / \\. j s $ / ,
      loader : \'skeleton-loader\' ,
      options : {
        procedure : function ( content ) {
          // Change the input content, and output it.
          return ( content + \'\' ) . replace ( / f o o / g , \'bar\' ) ;
        }
      }
    } ]
  }
} ;

 // webpack.config.js
// ...
test: / \\. h t m l $ / ,
// ...
// skeleton-loader options
options : {
  procedure : function ( content ) {
    // Remove all elements for testing from HTML.
    return ( content + \'\' ) . replace ( / < d i v c l a s s = \" t e s t \" > [ ^ ] * ? < \\/ d i v > / g , \'\' ) ;
  } ,
  toCode : true
}

 // webpack.config.js
// ...
test: / \\. j s o n $ / ,
// ...
// skeleton-loader options
options : {
  procedure : function ( content ) {
    var appConfig = JSON . parse ( content ) ;
    // Check and change JSON.
    console . log ( appConfig . foo ) ;
    appConfig . bar = \'PUBLISH\' ;
    return appConfig ;
  } ,
  toCode : true
}

 // webpack.config.js
// ...
// skeleton-loader options
options: {
  // Asynchronous mode
  procedure : function ( content , options , callback ) {
    setTimeout ( function ( ) {
      callback ( null , \'Edited: \' + content ) ;
    } , 5000 ) ;
  }
}

安装

npm install --save-dev skeleton-loader

用法

文档：

装载机
使用加载程序（用于WebPack V1）

选项

您可以通过WebPack配置中的“查询参数”或“ WebPack V1的Skeletonloader”选项（或Skeletonloader）指定选项。

程序

类型：功能
默认值：未定义

用输入内容来做某事的功能。该过程的结果是输出。
以下论点传递给该程序：

内容
资源文件的内容作为字符串或以前的加载程序传递的内容。也就是说，如果将另一个加载程序链接在加载程序列表中，则该加载程序传递的内容可能不是字符串。
选项
参考当前选项。如果从先前的加载程序传递这些，则可能包含sourcemap和meta。另外，它可能包含options.resourceoptions。
打回来
异步模式的回调函数。如果过程未接收回调，则加载程序以同步模式工作。

在过程函数中，这是指加载程序上下文。它具有ResourcePath，查询等

该过程的结果可以是任何类型，例如字符串，对象，空，未定义等。
例如：

 // app.js
var config = require ( \'config.json\' ) ;

 // webpack.config.js
// ...
// skeleton-loader options
options: {
  procedure : function ( config ) {
    if ( initialize ) {
      return ; // make config be undefined
    }
    return process . env . NODE_ENV === \'production\' ? config : { name : \'DUMMY\' } ; // data for test
  }
}

在同步模式下，该过程必须返回内容。内容作为JavaScript代码输出，或者如果将其链接到下一个加载程序。

例如：

 // webpack.config.js
// ...
// skeleton-loader options
options: {
  procedure : function ( content , options ) {

    // Do something with content.
    console . log ( \'Size: \' + content . length ) ;
    content = ( content + \'\' ) . replace ( / f o o / g , \'bar\' ) ; // content might be not string.

    // Check the resource file by using context.
    if ( this . resourcePath === \'/abc/resource.js\' ) {

      // Change current option.
      options . toCode = true ;
    }

    // Return the content to output.
    return content ;
  }
}

如果过程接收回调，则加载程序以异步模式工作。要返回SourCemap和Meta数据的两个或两个，必须是异步模式。
在异步模式下，该过程在完成后必须调用回调。

回调接受以下论点：

错误
一个错误对象，当您的过程失败时。
内容
输出作为JavaScript代码的内容，或将其链接到下一个加载程序。这可以是任何类型，例如字符串，对象，空，未定义等。
Sourcemap
可选的值sourcemap作为输出的JavaScript对象，或将其链接到下一个加载程序。
元
可选的值可以是任何东西并且是输出的，或者如果将其链接到下一个加载程序。

例如：

 // webpack.config.js
// ...
// skeleton-loader options
options: {
  procedure : function ( content , options , callback ) { // Switches to asynchronous mode
    // Do something asynchronously.
    require ( \'fs\' ) . readFile ( \'data.txt\' , function ( error , data ) {
      if ( error ) {
        // Failed
        callback ( error ) ;
      } else {
        // Done
        callback ( null , data + content ) ;
      }
    } ) ;
  }
}

options.resourceoptions

如果使用资源文件指定了查询字符串，则选项参数具有ResourceOptions属性，并且它是一个被解析的查询字符串的对象。
这对于导入资源文件时指定其他参数很有用。例如，您可以使用资源文件指定行为。

 var
  all = require ( \'file.html\' ) ,
  noHead = require ( \'file.html?removeHead=yes\' ) , ;

 // webpack.config.js
// ...
// skeleton-loader options
options: {
  procedure : function ( content , options ) {
    if ( options . resourceOptions && options . resourceOptions . removeHead ) {
      content = content . replace ( / < h e a d [ ^ ] * ? < \\/ h e a d > / , \'\' ) ; // Remove <head>
    }
    return content ;
  }
}

查询字符串的解析方式与加载器 – 局部相同。

赌注

类型：布尔值
默认值： false

当内容不是JavaScript代码（例如HTML，CSS，JSON等）时，指定为最终加载程序的加载程序必须将内容转换为JavaScript代码并输出以允许其他代码导入内容。
如果为伪模选项指定true，则将内容转换为JavaScript代码。
如果将加载程序指定为最终加载程序，则忽略此选项（即内容未转换，并且将其传递给下一个加载程序）。

例如：

 // webpack.config.js
module . exports = {
  // ...
  module : {
    rules : [
      // HTML code is converted to JavaScript string.
      // It works same as raw-loader.
      { test : / \\. h t m l $ / , loader : \'skeleton-loader?toCode=true\' } ,

      // JSON data is converted to JavaScript object.
      // It works same as json-loader.
      {
        test : / \\. j s o n $ / ,
        loader : \'skeleton-loader\' ,
        options : {
          procedure : function ( content ) { return JSON . parse ( content ) ; } ,
          toCode : true
        }
      }
    ]
  }
} ;

 // app.js
var html = require ( \'file.html\' ) ;
element . innerHTML = html ;

var obj = require ( \'file.json\' ) ;
console . log ( obj . array1 [ 3 ] ) ;