webpack-loader（加載器）

加載器是用於資源文件的轉換。 加載器就是以資源文件做爲入參並返回新的資源的函數（在Node.js中運行）。

例子

例如，您可使用加載器告訴webpack加載CSS文件或TypeScript文件，並將之轉換爲JavaScript。 首先，安裝相應的加載器：

npm install --save-dev css-loader
npm install --save-dev ts-loader

其次，在你的webpack.config.js中配置匹配每一個.css文件，並運用css-loader生成js資源，同理對.ts文件， 運用ts-loader`：

webpack.config.js

module.exports = { module: { rules: [ {test: /\.css$/, use: ['css-loader'](/loaders/css-loader)}, {test: /\.ts$/, use: ['ts-loader'](https://github.com/TypeStrong/ts-loader)} ] } }; 

注意，根據配置選項，應以如下規範使用相同的裝載器：

{test: /.css$/, loader: 'css-loader'}
// or equivalently
{test: /.css$/, use: 'css-loader'}
// or equivalently
{test: /.css$/, use: {
loader: 'css-loader',
options: {}
}}

配置

有三種方式在你的應用中使用加載器：

• 經過配置
• 在require語句中顯式引入
• 經過 CLI

經過 webpack.config.js配置

module.rules 容許您在webpack配置中指定多個加載器。

這是一個簡便的方式來配置加載器，並有助於你總覽應用中每一個加載器。

module: { rules: [ { test: /\.css$/, use: [ { loader: 'style-loader'}, { loader: 'css-loader', options: { modules: true } } ] } ] } 

經過 require配置

一般指在 require 語句(或者 define, require.ensure, 等)中配置加載器。使用!將資源中的加載器分開， 每一個部分相對於當前目錄解析。

require('style-loader!css-loader?modules!./styles.css'); 

能夠經過用整個規則前綴!覆蓋配置中的任何加載器 .

可使用查詢參數傳遞選項, 就好像如web(?key=value&foo=bar)中同樣。也可使用JSON對象(?{"key":"value","foo":"bar"}).

使用 module.rules 只要有可能，由於這將減小你的源代碼中的樣板，並容許你調試，而且定位加載器出現問題更快。

經過CLI配置

或者,你也能夠經過CLI安裝加載器 :

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

上述腳本爲.jade 文件配置了 jade-loader加載器, 以及爲css文件配置了 style-loader 和 css-loader 加載器.

加載器特性

• 加載器是能夠被串聯的。就好像是個資源的管道（正如gulp的管道同樣）。webpack會按時間順序編譯加載器鏈。 加載器鏈中的第一個加載器會將值做爲給下一個加載器的輸入。 在結束時，webpack最後返回JavaScript資源。
• 加載器能夠是同步或異步的。
• 加載器在Node.js中運行，而且能夠執行全部可能的操做。
• 加載器接受查詢參數。 這能夠用於將配置傳遞給加載器。
• 加載器也能夠配置一個options對象。
• Normal modules can export a loader in addition to the normal main via package.json with the loader field.
• 插件能夠給加載器提供更多特性.
• 加載器能夠產生任何其餘的文件.

裝載器經過預處理JavaScript環境，提供更多的功能。
functions (loaders).用戶如今有更多的靈活性來實現細粒度的邏輯，如壓縮，包裝，語言翻譯以及更多...。

得到加載器

加載器符合標準模塊協議。大多數狀況下，你會從模塊路徑 下得到你的加載器 (好比npm install, node_modules).

如何編寫加載器? 一個加載器模塊須要用Node.js兼容的JavaScript編寫一個能夠export的方法。 在一般狀況下，你用npm管理加載器，但你也能夠在你的應用程序中直接使用js文件編寫的加載器。

按照慣例, 加載器一般被命名爲 XXX-loader, XXX 就是場下文的名字，好比說 json-loader.

加載器名稱約定和優先搜索順序由由webpack配置API中的resolveLoader.moduleTemplates定義。