使用webpack loader加載器

瞭解webpack請移步webpack初識!

什麼是loader

loaders 用於轉換應用程序的資源文件，他們是運行在nodejs下的函數 使用參數來獲取一個資源的來源而且返回一個新的來源(資源的位置)，例如：你可使用loader來告訴webpack去加載一個coffeescript或者jsx

loader 特性

• loaders能夠串聯，他們應用於管道資源，最後的loader將返回javascript，其它的可返回任意格式（傳遞給下一個loader）
• loaders 能夠同步也能夠異步
• loaders在nodejs下運行而且能夠作一切可能的事
• loader接受參數，可用於配置裏
• loaders能夠綁定到extension/RegExps 配置
• loaders 能夠經過npm發佈和安裝
• 正常的模塊兒能夠處處一個loader除了
• loaders 能夠訪問配置
• 插件能夠給loaders更多的特性
• loaders能夠釋聽任意額外的文件

若是你對loader的例子感興趣能夠去看下現有的loader列表

解析loaders

loaders的解析相似模塊兒，一個loader模塊會導出一個方法而且可被nodejs寫爲可兼容的javascript，一般狀況下經過npm來管理loaders，但你也能夠把loader放在本身的應用裏

引用loaders

按照慣例，雖然不是必須的，但loaders一般被命名爲XXX-loader, XXX是上下文名稱，好比json-loader.
你可能引用loaders經過完整的（真實的）名字例如（json-loader)或者經過他的速記名（.json)
loader的名稱約定和優先級搜索是經過webpack內置api esolveLoader.moduleTemplates所定義
loader的名稱約定頗有用處，特別是當你經過require()聲明來引用的時候，下面會講到用法

安裝loaders

若是這個loader能夠在npm上安裝，你能夠安裝這個loader經過

$ npm install xxx-loader --save

或者

$ npm install xxx-loader --save-dev

用法

有不少種方法在你的app中使用loaders

• 明確的require聲明(在想要試用的js文件夾裏直接加載)
• 經過配置文件配置
• 經過CLI配置

require

提示：若是能夠的話儘可能不要使用require ，若是你想讓你的腳本可運行在服務端和客戶端（nodejs和瀏覽器）使用約定配置文件來配置

經過require聲明（define，require.ensure,等等）來加載指定的loaders ，使用!來分割資源loaders，每一部分會被解析到當前的文件

能夠在配置文件裏經過加!前綴這種規則重寫任意的loader

require("./loader!./dir/file.txt");

require("jade!./template.jade");
 
require("!style!css!less!bootstrap/less/bootstrap.less");

配置文件

你能夠經過正則在配置文件裏綁定loaders

{
    module: {
        loaders: [
            { test: /\.jade$/, loader: "jade" },
            // => "jade" loader 用於.jade文件

            { test: /\.css$/, loader: "style!css" },
            // => "style" 和 "css" loader 用於 ".css" 文件
            //另外一種語法
            { test: /\.css$/, loaders: ["style", "css"] },
        ]
    }
}

CLI(命令行界面)

CLI
能夠經過命令行來綁定加載器

$ webpack --module-bind jade --module-bind 'css=style!css'
 // 使用loader'jade'來加載'.jade'的文件 ,使用loaders 'style'和'css'加載'.css'文件

查詢參數

loader可使用查詢參數經過字符串（像web上的同樣）查詢字符串被插在?後面例如url-loader?mimetype=image/png.

提示：查詢參數的格式由loader決定，查看loader格式文檔大多數的loaders接受以下格式的參數形式（?key=value&key2=value2）和JSON 對象格式 (?{"key":"value","key2":"value2"}).

require裏

require("url-loader?mimetype=image/png!./file.png");

配置文件裏

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

或者

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

CLI方式

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

我的理解

以上文段皆翻譯自webpack官網如有錯誤請指正，接下來講下我的對loader的理解，我以爲loader是一個很於意思的功能，webpack其實運行在node下的一個編譯站，她能夠將各類個樣的文件打包起來，包括圖片呀，css呀，視頻呀，但不管怎麼打包最後導出的都是javascrit，可是咱們最終被客戶端拉出的頁面須要css的渲染 須要圖片的路徑，而loader她能夠把各類各樣的資源文件進行轉變編譯，最後用正確的格式加載到瀏覽器中，好比css被轉換爲style插入到頁面，圖片被轉換爲base64格式