Webpack 之 Loader 的使用

安裝 loaders

若是loader在npm裏，能夠這樣安裝:

$ npm install xxx-loader --save

或者

$ npm install xxx-loader --save-dev

 

使用方法

There are multiple ways to use loaders in your app:

• explicit in the require statement
• configured via configuration
• configured via CLI

用在require裏

提示 若是你但願你的腳本跨平臺（nodejs和瀏覽器端），在可能的狀況下避免使用這種方式。能夠嘗試使用接下來要講到的configuration

在require表達式(或者 define, require.ensure, 等.)。

用多個loaders用!隔開便可，每一個部分的loader的解析都相對於當前路徑。

配置：

能夠將loader綁到正則裏面

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

　　

做者：趙飛
連接：https://zhuanlan.zhihu.com/p/20946404
來源：知乎
著做權歸做者全部。商業轉載請聯繫做者得到受權，非商業轉載請註明出處。

也能夠經過CLI將loader綁定到一個擴展裏面：

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

上面表示 使用 "jade" 轉換 ".jade" 文件， 使用 "style" 和 "css" 轉換 ".css" 文件.

參數

Loader 能夠像在web裏面同樣經過一個請求串來傳參，請求串前面加上?好比url-loader?mimetype=image/png. 提示：請求串的格式取決於loader。能夠參照loader的文檔。大部分的loader都接受標準格式(?key=value&key2=value2)和json格式(?{"key":"value","key2":"value2"})。

require

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

Configuration

{ 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"