Webpack

使用加载器

什么是加载器

加载器是应用于你程序中的资源文件的转换器,它们是将源文件作为参数并返回新的资源的nodejs函数。
例如可以使用加载器让webpack加载CoffeScript或者JSX文件。

加载器特性

  • 加载器可以链式，通过管道来处理资源文件，最后的加载器返回JavaScript文件,其余的加载器可以
    返回任意格式的资源到下一个加载器
  • 加载器可以是同步的也可以是异步的
  • 加载器运行在nodejs中，可以做任何可能做的事。
  • 加载器接受查询参数，可以用于传递配置文件给加载器。
  • 可以在加载器定义中使用表达式或者正则。
  • 加载器可以通过npm下载或发布。
  • Normal modules can export a loader in addition to the normal main via package.json loader.
  • 加载器可以访问配置文件
  • 插件可以提供加载器更多特性
  • 加载器可以产出任意格式的文件
  • 更多

解析加载器

解析加载器和解析模块类似，一个加载器模块即一个导出函数的 node.js模块，通常情况下通过npm
管理加载器，但是也可以将加载器存在程序中。
引用加载器
按照管理，虽然不是要求的，加载器通常命名为xxx-loader,其中xxx就是加载器的名字，比如json-loader
你可以通过全程引用加载器，也可以通过它的简称来引用。
加载器的命名惯例和搜索优先级是在webpack的配置api的resolveLoader.moduleTemplates定义的.
加载器的命名惯例是很有用的，尤其是在require()语句中引用加载器时。
安装加载器
如果加载器在npm中是可获得的，你可以通过以下命令来安装

1
npm install xxx-loader --save

或者

1
npm install xxx-loader --save-dev

使用
在项目中有多种方式使用加载器

  • 通过require声明中明确指定
  • 通过配置文件配置
  • 通过命令行指定
    注意:尽可能避免使用这种方式，如果你希望你的脚本可以同时在nodejs和浏览器中运行，使用
    在配置文件中明确配置加载器的惯例。
    可以通过require语句使用加载器(或者define,require.ensure,等等)。只需要用!将加载器
    和资源分开即可，每一部分都是相对于当前目录。
    可以在配置中写很多个任意加载器通过前缀!的规则
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    require("./loader!./dir/file.txt");
    // => uses the file "loader.js" in the current directory to transform
    //    "file.txt" in the folder "dir".

    require("jade!./template.jade");
    // => uses the "jade-loader" (that is installed from npm to "node_modules")
    //    to transform the file "template.jade"
    //    If configuration has some transforms bound to the file, they will still be applied.

    require("!style!css!less!bootstrap/less/bootstrap.less");
    // => the file "bootstrap.less" in the folder "less" in the "bootstrap"
    //    module (that is installed from github to "node_modules") is
    //    transformed by the "less-loader". The result is transformed by the
    //    "css-loader" and then by the "style-loader".
    //    If configuration has some transforms bound to the file, they will not be applied.

通过配置文件
可以通过正则来在配置文件中绑定加载器

1
2
3
4
5
6
7
8
9
10
11
12
13
{
    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"] },
        ]
    }
}

命令行

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

上述命令给.jade文件绑定了 jade 加载器，给 .css 文件班定了 style 和 css 加载器。
查询参数
加载器可以通过查询web风格的字符串来指定查询参数，如：url-loader?mimetype=image/png
注：查询字符串的格式要看加载器，具体格式参考加载器文档。大多数的加载器支持普通的查询格式
（?key=value&key2=value2）和 JSON 对象（?{"key":"value","key2":"value2"}）。
require

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

配置文件中

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

或

1
2
3
4
5
{
    test: /\.png$/,
    loader: "url-loader",
    query: { mimetype: "image/png" }
}

命令行中

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