webpack構建與loaders

loaders 定義

先了解一下webpack，webpack是一個用於針對js文件的構建工具，在被構建的js文件中，咱們可使用require語句和webpack loader，以下：

var css = require("css!./file.css");
// => returns css code from file.css, resolves imports and url(...)

css代碼中的 @import與url()相似js的require()請求資源文件，css-loader 將會對 file.css文件中的 @import 和 url(...) 請求的資源進行解析處理，並轉交
給適合處理請求資源文件的file-loader 或 url-loader。詳情請看官網：https://www.npmjs.com/package/css-loader

基於上面示例，我對loader的定義是 轉譯器 

loaders 特徵

一、loaders 支持鏈式，它們被應用在資源的的管道中，最後一個loader預期返回javascript；每一個laoder會返回任意格式的資源，並交給下一個loader進行處理.
二、loaders 支持同步和異步
三、loaders 運行在node.js環境中，能夠作任何可能的事情(使用node.js api)
四、loaders 接受查詢參數，能夠經過配置loader來使用
五、loaders 能夠在配置中經過正則匹配的文件擴展名來綁定
六、loaders 能夠經過npm發佈，安裝
七、除了在package.json文件配置 main入口(指定js文件)以外，通常的js模塊均可以做爲導出的loader
八、loaders 能夠訪問配置
九、plugins 能夠給予 loaders 更多的特徵
十、loaders 能夠處理額外的任意文件

...

若是你對一些loader示例感興趣，請查看loaders列表：http://webpack.github.io/docs/list-of-loaders.html

loaders 解析

loaders解析相似於模塊解析，一個loader模塊 就是一個執行於node.js環境中的函數；通常狀況下，你應該經過使用npm來

管理你的loaders，可是在你的項目中，也可使用單個js模塊來做爲你的loader  

一、引用loaders

loaders常常被命名爲XXX-loader，XXX 代指文件mime類型的名稱，如：json-loader

咱們能夠經過全名(如：json-loader)，也能夠經過簡寫名(如：json)來引用loaders 

二、loaders 安裝

若是loader存在於npm中，你能夠像下面代碼來安裝loader：

npm install xxx-loader --save

or

npm install xxx-loader --save-dev

三、用法

使用require語句指定loaders

咱們使用 感嘆號! 來將資源文件與loaders分開，使用多個loaders，應在全部的轉換規則(loader)以前加上感嘆號!，如：

require(!style!css!less!./src/css/index.less);

注：使用多個loaders是由右向左處理的，文件依次按less-loader，css-loader，style-loader處理

經過在webpack.config.js文件中配置指定loaders

{
    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"] },
        ]
    }
}

經過在命令行中配置使用

經過命令行你能夠將loaders綁定到擴展的文件進行轉換，如：

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

這裏使用jade-loader綁定到 擴展的jade文件進行轉換，使用style-loader，css-loader綁定到css文件進行轉換 

四、查詢字符串

Loader能夠經過查詢字符串(相似web頁面url中的查詢字符串)傳遞查詢參數，使用問號?將 loader與查詢字符串鏈接，loader後跟查詢字符串，如：

url-loader?mimetype=image/png 

or 

url-loader?{"mimetype"="image/png"} 

require寫法

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

webpack.config.js配置

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

or

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

命令行綁定

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

 

ps：轉載請註明 博客園：楊君華，文章有不足之處，望指正，多包涵。