什麼是loader?

Loaders 是你的app裡面的源文件轉換器，是一種運行在nodejs裡面的，以源文件的內容作為參數，返回新的轉化後的內容的函數。

例如，你可以利用loaders來告訴webpack載入CoffeeScript或者JSX。

Loader 特性

• 可以鏈式調用。他們在資源的管道裡面被調用。最後一個loder需要輸出的是JavaScript，而在中間的loader輸出的可以的是能傳到下一級loader的任意格式
• 可以是同步也可以是非同步的
• 跑在node裡面也就意味著有很多可能
• 能接受請求參數，這樣就可以傳入一些配置給loader
• 在源配置中可以綁定到擴展名 / RegExps對象里
• 可以通過npm發布和安裝
• 標準modules就能通過packge.json loader導出除了標準main意外的loader
• 可以訪問webpack源配置configuration
• 插件可以帶給loader更多特性
• 還可以emit出其它任意格式的文件
• 更多.
• loaders列表.

解析 loaders

Loaders 的解析和 modules 類似。一個loader要求是在node裡面導出的一個函數且兼容js。通常情況你可以用npm管理loader但是你也可以把它當作一個文件在你的app裡面引入。 Loaders are [resolved similar to modules ][ resolving]. A loader module is expected to export a function and to be written in node.js compatible JavaScript. In the common case you manage loaders with npm, but you can also have loaders as files in your app.

引用 loaders

按照慣例，但也不是必須的，loader一般命名為XXX-loader，XXX代表它的上下文名字，比如json-loader

你可以用她的全名比如json-loader或者縮寫json

Loader的命名約定和優先搜索順序在 webpack configuration API 里的 resolveLoader.moduleTemplates中規定的。 Loader 命名約定很有用熱別是在require()聲明式裡面。可以參看後面的使用方法。

安裝 loaders

如果loader在npm里，可以這樣安裝:

$ npm install xxx-loader --saven

或者

$ npm install xxx-loader --save-devn

使用方法

There are multiple ways to use loaders in your app:

• explicit in the require statement
• configured via configuration
• configured via CLI

用在require里

提示 如果你希望你的腳本跨平台（nodejs和瀏覽器端），在可能的情況下避免使用這種方式。可以嘗試使用接下來要講到的configuration

在require表達式(或者 define, require.ensure, 等.)。

用多個loaders用!隔開即可，每個部分的loader的解析都相對於當前路徑。

It』s possible to overwrite any loaders in the configuration by prefixing the entire rule with !.（這句沒明白）

require("./loader!./dir/file.txt");n// => 使用 當前目錄下"loader.js" 文件轉換n// 在"dir"上的"file.txt".nnrequire("jade!./template.jade");n// => 使用 "jade-loader" (安裝到 "node_modules"裡面的)n// 來轉化"template.jade"n// 如果configuration裡面還有別的loader綁定到該文件，那麼那個loader會被也會調用.nnrequire("!style!css!less!bootstrap/less/bootstrap.less");n// => 轉化順序"bootstrap.less" =>"less-loader"=>"less-loader"=>"style-loader"n

Configuration

可以將loader綁到正則裡面

{n module: {n loaders: [n { test: /.jade$/, loader: "jade" },n // => "jade" loader is used for ".jade" filesnn { test: /.css$/, loader: "style!css" },n // => "style" and "css" loader is used for ".css" filesn // Alternative syntax:n { test: /.css$/, loaders: ["style", "css"] },n ]n }n}n

CLI

也可以通過CLI將loader綁定到一個擴展裡面：

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

上面表示 使用 "jade" 轉換 ".jade" 文件， 使用 "style" 和 "css" 轉換 ".css" 文件.

參數

Loader 可以像在web裡面一樣通過一個請求串來傳參，請求串前面加上?比如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");n

Configuration

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

或者

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

CLI

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

推薦閱讀：