loader 是导出一个函数 的 node 模块， 它的作用是获取处理前的内容，对改内容进行处理后返回。
第一个 loader 的传入参数只有一个：资源文件(resource file)的内容。compiler 需要得到最后一个 loader 产生的处理结果。这个处理结果应该是 String 或者 Buffer（被转换为一个 string），代表了模块的 JavaScript 源码。 如果有多个loader，第一个 loader 最后调用，期望返回是 JS 代码和 sourcemap 对象（可选）
loader 函数接受的参数是有三个的：content, map, meta。content 是模块内容，但不仅限于字符串，也可以是 buffer，例如一些图片或者字体等文件。map 则是 sourcemap 对象，meta 是其他的一些元数据。loader 函数单纯返回一个值，这个值是当成 content 去处理，但如果你需要返回 sourcemap 对象或者 meta 数据，甚至是抛出一个 loader 异常给 webpack 时，你需要使用 this.callback(err, content, map, meta) 来传递这些数据。
基本形式
基本形式
输出额外的内容：基本形式 只是返回了原内容转换后的结果，但是有些场景下，我们需要返回额外的内容（想要输出的额外内容）， 比如 babel-loader 转换 ES6 代码 后，还要输出对应的 Source Map ，方便调试。this.callback 比起 return source 更常用一点。
输出额外的内容；当调用 callback() 时总是返回 undefined
同步和异步 loader
对应一些 loader 中 有 异步操作的
异步 loader
处理二进制数据
当我们需要 webpack 传递给我们 二进制的 数据 source 的时候，我们可以这样设置
处理二进制数据
Loader API
api 官网查看， 举个例子：
this.context: 当前文件所在的根目录，比如当前 loader要处理的文件 是 /src/index.js，那么this.context 就等于 /src；
this.resolve: 像 require 语句一样获得指定文件的完整路径，resolve(context: string，request: string，callback: function(err，result: string))
this.resolve
Loader 用法
设计原则：1 单一职责 2 按照从右往走的执行顺序，上一个 loader 的执行结果 给下一个处理， 比如 [style-loader，css-loader]
使用方法
1 本地加载， 配置 webpack.config.js， resolverLoader
resolverLoader
2 NPM link
1 首先 loader 所在的目录下有 package.json ，并且 package 中的 name 就是我们的 包名；
2 在该目录下执行 npm link，就会将我们的包 注册到全局；
3 在要使用的 项目目录下 中执行 npm link 包名 ， 就会将全局中的包 引入 到 node_moduels 中，我们就可以像其他的 loader 一样使用了 。
loader 开发
我们可以使用 loader-runner 这个 npm 包，在没有安装 webpack 和 webpack-cli 的情况下开发 loader。
网友评论