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"