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"