骨架加载器
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' ) ;
}
}
} ]
}
} ; [^]*?
/g, '');
},
toCode: true
}">// 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
}
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 ] ) ;可缓存
类型：布尔值
默认值： true
使结果可以缓存。
当输入和依赖项没有更改时，可缓存的加载程序必须具有确定性结果。这意味着除了用上下文指定的adddddddddddientency，加载程序不应具有其他依赖性。
请注意，默认值是正确的。