[譯]開啓webpack之旅( 三 )：使用Loaders

原文地址

Loaders爲什麼物？

Loaders是應用於你app資源文件上的轉換器。它們是執行在node端的函數，它們將源文件做爲參數並將轉換結果做爲新的資源返回。
例如，你可使用loaders讓web pack加載CoffeeScript或是JSX。

Loader特性

• Loaders能夠被鏈式調用。它們像管道（pipeline）同樣處理資源。只有最後一個loader返回JavaScript格式的代碼，而其餘的loader能夠返回任意格式並將其傳給下一個loader

• Loaders既能同步執行也能異步執行

• Loaders運行在 node.js 環境中，因此能夠作任何可能的事情

• Loaders接受query參數，這意味着咱們能夠把配置項傳給loader

• Loaders在配置文件中能夠被綁定到不一樣的文件，經過擴展名或正則表達式

• Loaders可經過nam發佈或安裝

• 除了能夠在package.son文件中配置loader，一般模塊也做爲能夠loader。

• Loader 能夠訪問配置

• 插件賦予loaders更多特性

• Loaders可用來分發文件（詳見）

• 其餘特性
  若是對某些loader感興趣，請翻閱loaders列表

Loaders的解析

Loaders的解析與模塊的解析一致，每一個loader都是運行在JavaScript中的腳本並一般返回一個函數。咱們一般用nam管理loaders模塊，但在你的app也可使用本身寫的文件充當模塊。

模塊的引用

並不是硬性要求，只是咱們習慣上使用XXX-loader做爲loaders的名稱。其中XXX是上下文名稱，例如json-loader。

你能夠經過全名引用一個loader(如json-loader), 也可使用簡寫(如json)。
loader名稱的習慣用法與優先級規則由webpack的配置API： resolveLoader.moduleTemplates 定義。

Loader名稱的習慣用法是頗有用的，特別是在使用require()語句引用Loader時。參見下述用法。

安裝loaders

發佈在npm上的loaders你可使用：

$ npm install xxx-loader --save

或

$ npm install xxx-loader --save-dev

安裝。

用法

在app中使用loaders的方法也是多種多樣的：

• 直接使用require語句引用

• 在配置文件中配置configuration

• 在CLI（命令行）中配置

經過require引用loaders

注意：在任何狀況下都因避免使用此方法，若是你想要讓你的腳本不依賴運行環境（node或瀏覽器）。使用配置去聲明loaders（參見下述配置）。

請儘可能使用require語法聲明(或define,require.ensure).使用!做爲loaders與資源之間的分隔。被引用部分的相對路徑是當前目錄。

模塊能夠串聯，經過使用!符號組織。

require("./loader!./dir/file.txt");
// => 使用在當前目錄下的"loader.js"文件去處理在文件夾"dir"中"file.txt"文件

require("jade!./template.jade");
// => 使用"jade-loader" (經過nam安裝在"node_modules")去處理文件"template.jade"，若是配置中對文件還有別的處理也會被應用。

require("!style!css!less!bootstrap/less/bootstrap.less");
// => "bootstrap"目錄下的"less"目錄下的"bootstrap.less"文件將會被"less-loader"處理後轉給"css-loader"處理以後再轉給"style-loader"處理，若是配置中對文件還有別的處理將不會被應用。

配置文件

在配置文件中經過正則綁定loaders:

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader處理".jade"文件

            { test: /\.css$/, loader: "style!css" },
            // => "style"與"css" loader 處理 ".css" 文件
            // 另外一種語法:
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI

經過命令行擴展綁定loaders：

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

這裏使用「jade」 loader 來處理「.jade」文件，使用「style」 loader與「css」 loader 處理「.css」文件。

查詢參數

Loader能夠經過查詢字符串來傳遞查詢參數(像url中同樣)。經過使用?將查詢字符串附加在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");

在Configuration中使用的例子

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

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

CLI

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