【译】webpack文档翻译 使用loaders

英文原文

翻译目录传送门

转载请注明来源(sunshine-boy)

什么是loaders？

loaders是你app的资源文件的转换器。他们是把资源的source(源，译注：读取文件到内存的生成Buffer或字符串叫源)作为参数并返回新的source的函数(运行在nodejs)。

举例，你可以使用loader来告诉webpack去加载coffeeScript或jsx。

loader特性

　　·loaders可以是链式的。他们被应用在资源的传递途径里。最后的loader应该返回js代码。其他loader可以返回任何格式的source，source被传递到下一个loader。

　　·loaders可以同步或异步

　　·loaders运行在nodejs里，并且可以做在nodejs里可以做的任何事。

　　·loaders接受查询参数。它可以用来传递配置信息给loader。

　　·loaders可以绑定配置信息里的拓展名/正则。

　　·loaders可以通过npm发布/安装。

　　·loaders可以访问配置文件。

　　·插件可以给loader更多特性。

　　·loaders可以生成任意额外的文件。

　　·等等。

如果你对一些loader的例子感兴趣，去看看loaders列表。

解析loaders

loaders解析跟普通模块相似。一个loader模块应该输出一个函数，并且写法兼容nodejs的js。在通常情况下，你可以用npm管理loaders，但你也可以在app里用文件作为loaders。

安装loaders

如果该loader发布在npm上，你可以这样安装loader：

npm install xxx-loader --save

或者

npm install xxx-loader --save-dev

用法

有多个方式来使用loaders：

　　·直接在require里声明

　　·通过配置文件来配置

　　·通过Cli

在require里的loaders

注意：尽量防止这样用，如果可能，如果你打算让你的脚本无法知道环境(nodejs和浏览器)。使用配置传统来指定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”
//如果配置文件里的其他loaders绑定了“template.jade”，他们也会被使用。

require("!style!css!less!bootstrap/less/bootstrap.less");
//=>文件“bootstrap.less”在文件“less”里，文件夹“less”在模块“bootstrap”(通过github安装到node_modules)里
//该模块被“less-loader”转换。转换的结果被“css-loader转换”，然后被“style-loader”转换
//如果配置文件里的其他loaders绑定了“template.jade”，他们也会被使用。

配置

你需要在配置里用一个正则绑定loaders：

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // “jade”loader被用来处理“.jade”文件

            { test: /\.css$/, loader: "style!css" },
            // loader“css”和“style”来处理“.css”文件
            // 可选的语法：
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI

你可以如果CLI来绑定拓展名到loaders：

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

这将会使用loader“jade”来处理“.jade”文件，loader“css”和“style”来处理“.css”文件。

查询参数

可以通过查询字符串(就像web里)来传递任何参数给loader。

查询字符串前置一个?后接到loader上，例如：

url-loader?mimetype=image/png

注意：查询字符串的格式取决于loader。在loader文档里查看格式。绝大多数loader接受参数以查询格式(?key=value&key2=value2)和JSON对象(?{"key":"value","key2":"value2"}).

在require里

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

配置

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

或

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

CLI

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

 

webpack翻译目录传送门