webpack1.xx之loader

1. 什么是loader(加载器）

Loader 可以理解为是模块和资源的转换器，它本身是一个函数，接受源文件作为参数，返回转换的结果。这样，我们就可以通过 require 来加载任何类型的模块或文件，比如 CoffeeScript、 JSX、 LESS 或图片。

2. loader features

1. Loader 可以通过管道方式链式调用，每个 loader 可以把资源转换成任意格式并传递给下一个 loader ，但是最后一个 loader 必须返回 JavaScript。
2. Loader 可以同步或异步执行。
3. Loader 运行在 node.js 环境中，所以可以做任何可能的事情。
4. Loader 可以接受参数，以此来传递配置项给 loader。
5. Loader 可以通过文件扩展名（或正则表达式）绑定给不同类型的文件。
6. loader在配置上可以绑定extensions/ RegExps。
7. loader可以通过npm出版/安装。
8. 除了通过 package.json 的 main 指定，通常的模块也可以导出一个 loader 来使用。
9. Loader 可以访问配置。
10. 插件可以让 loader 拥有更多特性。
11. Loader 可以分发出附加的任意文件。

3. 解析loader

Loader 本身也是运行在 node.js 环境中的 JavaScript 模块，它通常会返回一个函数。大多数情况下，我们通过 npm 来管理 loader，但是你也可以在项目中自己写 loader 模块。

4. 引用loader

• 按照惯例,虽然不是必需的,加载器通常命名为XXX-loader,XXX是上下文的名称。例如,json-loader。
• 你可以以完整的名称如：json-loader来引用loader,或者使用简写名称，例如：json。

5. 安装loader

$ npm install xxx-loader --save

or

$ npm install xxx-loader --save-dev

6. loader 使用

有很多方法在你的应用程序里面使用loader。

• Loader 可以在 require() 引用模块的时候添加
• webpack 全局配置中进行绑定
• 通过命令行配置

分别说说按照上述方法来使用loader

6.1 loaders in require （尽量不要用这种形式）

我们可以在require语句里面使用loaders。并且我们可以使用 ! 来隔开一个个不同的加载器。

//使用文件当前目录下的 loader.js 来处理 dir文件下面的 file.txt文件。
require("./loader!./dir/file.txt"); 

//使用npm安装的加载器 jade-loader 处理 文件。
require("jade!./template.jade");

转换bootstrap.less  通过less-loader-->css-loadre--->style-loader
require("!style!css!less!bootstrap/less/bootstrap.less");

注意：当拼接多个loader时，是从右边向左执行的。

6.2 configuration

可以将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"] },
        ]
    }
}

6.3 CLI

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

7. 参数

类似web页面传参数
注意：参数的格式又对应的loader决定，具体需要参照loader对应的文档。

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

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

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