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 特征

1、loaders 支持鏈式，它們被應用在資源的的管道中，最后一個loader預期返回javascript；每個laoder會返回任意格式的資源，並交給下一個loader進行處理.
2、loaders 支持同步和異步
3、loaders 運行在node.js環境中，可以做任何可能的事情(使用node.js api)
4、loaders 接受查詢參數，可以通過配置loader來使用
5、loaders 可以在配置中通過正則匹配的文件擴展名來綁定
6、loaders 可以通過npm發布，安裝
7、除了在package.json文件配置 main入口(指定js文件)之外，一般的js模塊都可以作為導出的loader
8、loaders 可以訪問配置
9、plugins 可以給予 loaders 更多的特征
10、loaders 可以處理額外的任意文件

...

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

loaders 解析

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

管理你的loaders，但是在你的項目中，也可以使用單個js模塊來作為你的loader  

1、引用loaders

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

我們可以通過全名(如：json-loader)，也可以通過簡寫名(如：json)來引用loaders 

2、loaders 安裝

如果loader存在於npm中，你可以像下面代碼來安裝loader：

npm install xxx-loader --save

or

npm install xxx-loader --save-dev

3、用法

使用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文件進行轉換 

4、查詢字符串

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：轉載請注明 博客園：楊君華，文章有不足之處，望指正，多包涵。