Webpack Loader

Webpack 本身只能處理 JavaScript 模塊，如果要處理其他類型的文件，就需要使用 loader 進(jìn)行轉(zhuǎn)換。

Loader 可以理解為是模塊和資源的轉(zhuǎn)換器，它本身是一個(gè)函數(shù)，接受源文件作為參數(shù)，返回轉(zhuǎn)換的結(jié)果。這樣，我們就可以通過(guò) require 來(lái)加載任何類型的模塊或文件，比如 CoffeeScript、 JSX、 LESS 或圖片。

先來(lái)看看 loader 有哪些特性？

• Loader 可以通過(guò)管道方式鏈?zhǔn)秸{(diào)用，每個(gè) loader 可以把資源轉(zhuǎn)換成任意格式并傳遞給下一個(gè) loader ，但是最后一個(gè) loader 必須返回 JavaScript。
• Loader 可以同步或異步執(zhí)行。
• Loader 運(yùn)行在 node.js 環(huán)境中，所以可以做任何可能的事情。
• Loader 可以接受參數(shù)，以此來(lái)傳遞配置項(xiàng)給 loader。
• Loader 可以通過(guò)文件擴(kuò)展名（或正則表達(dá)式）綁定給不同類型的文件。
• Loader 可以通過(guò) npm 發(fā)布和安裝。
• 除了通過(guò) package.json 的 main 指定，通常的模塊也可以導(dǎo)出一個(gè) loader 來(lái)使用。
• Loader 可以訪問(wèn)配置。
• 插件可以讓 loader 擁有更多特性。
• Loader 可以分發(fā)出附加的任意文件。

Loader 本身也是運(yùn)行在 node.js 環(huán)境中的 JavaScript 模塊，它通常會(huì)返回一個(gè)函數(shù)。大多數(shù)情況下，我們通過(guò) npm 來(lái)管理 loader，但是你也可以在項(xiàng)目中自己寫(xiě) loader 模塊。

按照慣例，而非必須，loader 一般以 xxx-loader 的方式命名，xxx 代表了這個(gè) loader 要做的轉(zhuǎn)換功能，比如 json-loader。

在引用 loader 的時(shí)候可以使用全名 json-loader，或者使用短名 json。這個(gè)命名規(guī)則和搜索優(yōu)先級(jí)順序在 webpack 的 resolveLoader.moduleTemplates api 中定義。

Default: ["*-webpack-loader", "*-web-loader", "*-loader", "*"]

Loader 可以在 require() 引用模塊的時(shí)候添加，也可以在 webpack 全局配置中進(jìn)行綁定，還可以通過(guò)命令行的方式使用。

接上一節(jié)的例子，我們要在頁(yè)面中引入一個(gè) CSS 文件 style.css，首頁(yè)將 style.css 也看成是一個(gè)模塊，然后用 css-loader 來(lái)讀取它，再用 style-loader 把它插入到頁(yè)面中。

/* style.css */
body { background: yellow; }

修改 entry.js：

require("!style-loader!css-loader!./style.css") // 載入 style.css
document.write('It works.')
document.write(require('./module.js'))

安裝 loader：

npm install css-loader style-loader

重新編譯打包，刷新頁(yè)面，就可以看到黃色的頁(yè)面背景了。

如果每次 require CSS 文件的時(shí)候都要寫(xiě) loader 前綴，是一件很繁瑣的事情。我們可以根據(jù)模塊類型（擴(kuò)展名）來(lái)自動(dòng)綁定需要的 loader。

將 entry.js 中的 require("!style!css!./style.css") 修改為 require("./style.css") ，然后執(zhí)行：

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader'

# 有些環(huán)境下可能需要使用雙引號(hào)
$ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader"

顯然，這兩種使用 loader 的方式，效果是一樣的。