当前位置: 首页 > 工具软件 > Little Loader > 使用案例 >

什么是loaders?

慕学海
2023-12-01

什么是Loaders?


loaders是应用在你app中的某些源文件的转换器,它们是一些函数(运行在node.js上),可以将资源文件的源文件依据参数转化为

新的源文件。

例如,你可以使用loaders告诉webpack去加载(转换)CoffeeScript或者JSX。


Loader特性


• loaders可以是链式的。它们使用管道的方式应用于资源。期待最后一个loader返回JavaScript;其他的loader可以返回任意的资源

格式,然后传递给下一个loader。


• 支持同步和异步。


• 运行在node.js中,并且可以做所有可能做的事。


• 接受查询参数,所以我们可以向loader传递配置信息。


• 在配置文件中loaders可以被绑定到扩展名(原文是extensions,感觉不太通顺)或者正则表达式。


• 可以通过npm进行发布和安装。


• 标准模块可以通过package.jsonloader向标准main输出loader。


•可以访问(access)配置。


•插件可以赋予loaders更多的特性。


•可以发出更多额外的任意文件。


•等等


如果你对更多的loader例子感兴趣,请走传送门http://webpack.github.io/docs/list-of-loaders.html


解析Loaders


loaders可以向模块一样被解析。一个loader模块被期望输出一个函数,并且使用兼容性js的node.js书写。通常情况下,你可以使用

npm管理loaders,但你也可以像你的app文件一样管理它们。

引用loaders


按照惯例,loaders虽然不被要求,但是通常会被命名为xxx-loader,而xxx会被当做上下文名称。例如,json-loader。

你可以使用它的全名(实际名字,例如json-loader),或者它的简写名字(例如json)来引用一个loader。

loader的命名协定和搜索顺序的优先级由webpack的配置API中的 resolveLoader.moduleTemplate 定义。

loader命名协定可能是有用的,尤其是通过require()语句引用它们的时候;看下面的用法

安装loaders


如果某个loader在npm上是可以使用的,那么你可以通过这样去安装它:

npm install xxx-loader --save

或者

npm install xxx-loader --save-dev


用法


有多种方式在你的app中使用loaders:

•在require语句中显示使用

•通过配置文件配置

•通过CLI配置

loaders in require


注:如果可能的话,如果你的脚本处于不可确定的环境下(node.js和浏览器), 请避免这么使用。使用配置协定来指定

loaders(请看下章分解)。

可以在require(或者define,require.ensure等等)语句中指定loaders。使用'!'隔开不同的loaders。每个部分根据当前目录来

解析。

可以在配置文件中通过在整个规则前加上'!'来重写任何loaders。

require("./loader!./dir/file.txt");
//=>在当前文件夹中使用“loader.js”文件对dir文件夹中的“file.txt”文件进行转换
require("jade!./template.jade");
//=>使用"jade-loader" (通过npm安装到了"node_modules"文件夹中)对文件"template.jade"
//  进行转换。如果配置文件中有一些转化也绑定到了这个文件,那么他们也将被应用。
require("!style!css!less!bootstrap/less/bootstrap.less");
//=>在"bootstrap"模块(通过GitHub安装到了"node_modules"文件夹中)中的less"文件
//  夹中的"bootstrap.less"文件将被"less-loader"转换。这个结果将会被"css-loader"
//  转换,然后再被"style-loader"转换。如果配置文件中有一些转化也绑定到了这个文件,
//  那么他们也将被应用。

注:当使用链式loaders,他们会从右到左被应用。

配置


你可以通过配置文件来绑定loaders到正则表达式上:

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader is used for ".jade" files

            { test: /\.css$/, loader: "style!css" },
            // => "style" and "css" loader is used for ".css" files
            // Alternative syntax:
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}


CLI(命令行)


你可以通过CLI绑定loaders到扩展名:

webpack --module-bind jade --module-bind 'css=style!css'

这里使用loader"jade"转换".jade"文件,使用"style"和"css"转换".css"文件。

查询参数


可以通过将查询字符串(就像在web中一样)传递查询参数到loader中。查询字符串会使用'?'添加到loader上。例如url-loader?

mimetype=image/png。

注:查询字符串的格式由loader决定,可以到loader文档查看具体情况。大部分loaders接受标准查询格式(?

key=value&key2=value2)以及JSON对象(?{"key":"value","key2":"value2"})。

1、require

require("url-loader?mimetype=image/png!./file.png");

2、配置文件

{ test: /\.png$/, loader: "url-loader?mimetype=image/png" }

或者

{
    	test: /\.png$/,
    	loader: "url-loader",
    	query: { mimetype: "image/png" }
}

3、CLI

webpack --module-bind "png=url-loader?mimetype=image/png"


 类似资料: