webpack Loader

Webpack 自己只能處理 JavaScript 模塊，若是要處理其餘類型的文件，就須要使用 loader 進行轉換。

Loader 能夠理解爲是模塊和資源的轉換器，它自己是一個函數，接受源文件做爲參數，返回轉換的結果。這樣，咱們就能夠經過 require 來加載任何類型的模塊或文件，好比 CoffeeScript、 JSX、 LESS 或圖片。

先來看看 loader 有哪些特性？

• Loader 能夠經過管道方式鏈式調用，每一個 loader 能夠把資源轉換成任意格式並傳遞給下一個 loader ，可是最後一個 loader 必須返回 JavaScript。
• Loader 能夠同步或異步執行。
• Loader 運行在 node.js 環境中，因此能夠作任何可能的事情。
• Loader 能夠接受參數，以此來傳遞配置項給 loader。
• Loader 能夠經過文件擴展名（或正則表達式）綁定給不一樣類型的文件。
• Loader 能夠經過 npm 發佈和安裝。
• 除了經過 package.json 的 main 指定，一般的模塊也能夠導出一個 loader 來使用。
• Loader 能夠訪問配置。
• 插件可讓 loader 擁有更多特性。
• Loader 能夠分發出附加的任意文件。

Loader 自己也是運行在 node.js 環境中的 JavaScript 模塊，它一般會返回一個函數。大多數狀況下，咱們經過 npm 來管理 loader，可是你也能夠在項目中本身寫 loader 模塊。

按照慣例，而非必須，loader 通常以 xxx-loader 的方式命名，xxx 表明了這個 loader 要作的轉換功能，好比 json-loader。

在引用 loader 的時候可使用全名 json-loader，或者使用短名 json。這個命名規則和搜索優先級順序在 webpack 的 resolveLoader.moduleTemplates api 中定義。

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

Loader 能夠在 require() 引用模塊的時候添加，也能夠在 webpack 全局配置中進行綁定，還能夠經過命令行的方式使用。

接上一節的例子，咱們要在頁面中引入一個 CSS 文件 style.css，首頁將 style.css 也當作是一個模塊，而後用 css-loader 來讀取它，再用 style-loader 把它插入到頁面中。

/* 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

從新編譯打包，刷新頁面，就能夠看到黃色的頁面背景了。

若是每次 require CSS 文件的時候都要寫 loader 前綴，是一件很繁瑣的事情。咱們能夠根據模塊類型（擴展名）來自動綁定須要的 loader。

將 entry.js 中的 require("!style!css!./style.css") 修改成 require("./style.css") ，而後執行：

$ webpack entry.js bundle.js --module-bind 'css=style-loader!css-loader' # 有些環境下可能須要使用雙引號 $ webpack entry.js bundle.js --module-bind "css=style-loader!css-loader" 

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