1. 什么是loader(加載器）
Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個函數(shù)，接受源文件作為參數(shù)随夸，返回轉(zhuǎn)換的結(jié)果靖避。這樣潭枣，我們就可以通過 require 來加載任何類型的模塊或文件比默，比如 CoffeeScript、 JSX盆犁、 LESS 或圖片命咐。
2. loader features
- Loader 可以通過管道方式鏈?zhǔn)秸{(diào)用，每個 loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個 loader 谐岁，但是最后一個 loader 必須返回 JavaScript醋奠。
- Loader 可以同步或異步執(zhí)行。
- Loader 運行在 node.js 環(huán)境中伊佃，所以可以做任何可能的事情窜司。
- Loader 可以接受參數(shù)，以此來傳遞配置項給 loader航揉。
- Loader 可以通過文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件塞祈。
- loader在配置上可以綁定extensions/ RegExps。
- loader可以通過npm出版/安裝帅涂。
- 除了通過 package.json 的 main 指定议薪，通常的模塊也可以導(dǎo)出一個 loader 來使用。
- Loader 可以訪問配置漠秋。
- 插件可以讓 loader 擁有更多特性笙蒙。
- Loader 可以分發(fā)出附加的任意文件。
3. 解析loader
Loader 本身也是運行在 node.js 環(huán)境中的 JavaScript 模塊庆锦，它通常會返回一個函數(shù)捅位。大多數(shù)情況下，我們通過 npm 來管理 loader搂抒，但是你也可以在項目中自己寫 loader 模塊艇搀。
4. 引用loader
- 按照慣例,雖然不是必需的,加載器通常命名為XXX-loader,XXX是上下文的名稱。例如,json-loader求晶。
- 你可以以完整的名稱如：json-loader來引用loader,或者使用簡寫名稱焰雕，例如：json。
5. 安裝loader
$ npm install xxx-loader --save
or
$ npm install xxx-loader --save-dev
6. loader 使用
有很多方法在你的應(yīng)用程序里面使用loader芳杏。
- Loader 可以在 require() 引用模塊的時候添加
- webpack 全局配置中進(jìn)行綁定
- 通過命令行配置
分別說說按照上述方法來使用loader
6.1 loaders in require （盡量不要用這種形式）
我們可以在require語句里面使用loaders矩屁。并且我們可以使用 ! 來隔開一個個不同的加載器。
//使用文件當(dāng)前目錄下的 loader.js 來處理 dir文件下面的 file.txt文件爵赵。
require("./loader!./dir/file.txt");
//使用npm安裝的加載器 jade-loader 處理 文件吝秕。
require("jade!./template.jade");
轉(zhuǎn)換bootstrap.less 通過less-loader-->css-loadre--->style-loader
require("!style!css!less!bootstrap/less/bootstrap.less");
注意：當(dāng)拼接多個loader時，是從右邊向左執(zhí)行的空幻。
6.2 configuration
可以將loader與正則結(jié)合來配置使用烁峭。
{
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"] },
]
}
}
6.3 CLI
$ webpack --module-bind jade --module-bind 'css=style!css'
7. 參數(shù)
類似web頁面?zhèn)鲄?shù)
注意：參數(shù)的格式又對應(yīng)的loader決定，具體需要參照loader對應(yīng)的文檔。
1. require("url-loader?mimetype=image/png!./file.png");
2. { test: /\.png$/, loader: "url-loader?mimetype=image/png" }
or
{
test: /\.png$/,
loader: "url-loader",
query: { mimetype: "image/png" }
}
3. webpack --module-bind "png=url-loader?mimetype=image/png"