webpack-loader是什么？

loader是一个函数，有一个参数是源文件内容，有内部的this，最后的loader必须有返回值否则会报错：Final loader didn't return a Buffer or String

原因：

如果是处理顺序排在最后一个的 Loader，那么它的返回值将最终交给webpack的require，换句话说，它一定是一段用字符串来存储可执行的JavaScript脚本

如何配置webpack-loader？

配置单个loader

    {
      test: /\.js$/
      use: [
        {
          loader: path.resolve(__dirname, 'src', 'loaders', 'first-loader.js'),
          options: {/*这里是给loader传入的参数会有一个专门的库来处理这个参数，待会下面会讲到*/}
        }
      ]
    }

配置多个loader

如果把我们自己写的loader当做一个模块来加载的时候，webpack默认的会去查找node_modules下面的模块，但是我们自己写的loader没有在node_modules中这时候我们怎么样让他也查找我们自己写的loader呢？这时候我们就需要设置一个属性 resolveLoader他是一个对象，里面有一个modules属性该属性的值是一个数组数组中的每个值就是要查找的loader存放地

    resolveLoader: {
       modules: [
    		path.resolve('node_modules'),
    	    path.resolve(__dirname, 'src', 'loaders')
    	]
    },

再配置loader

    {
        test: /\.less$/,
        use: ['style-loader','less-loader']
    }

loader的用法准则

单一职责，一个loader只做一件事情，这样设计的原因是因为，职责越单一，组合性就强，可配置性就好。

从右到左，链式执行，上一个loader的处理结果传给下一个loader接着处理

模块化，一个loader就是一个模块，单独存在不依赖其他的任何模块无状态，就类似于纯函数。

loader有实用工具loader-utils解析loader参数的和schema-utils校验格式的

loader的依赖

loader相关API

1、缓存 webpack充分地利用缓存来提高编译效率

    this.cacheable();

2、异步当一个 Loader 无依赖，可异步的时候我想都应该让它不再阻塞地去异步

    // 让 Loader 缓存
    module.exports = function(source) {
        var callback = this.async();
        // 做异步的事
        doSomeAsyncOperation(content, function(err, result) {
            if(err) return callback(err);
            callback(null, result);
        });
    };

3、传入的源文件以buffer的形式

默认的情况源文件是以 UTF-8 字符串的形式传入给 Loader,设置module.exports.raw = true可使用 buffer 的形式进行处理

    module.exports.raw = true

4、获取loader的options

    const loaderUtils = require('loader-utils');
    module.exports = function (source) {
    	// 获取当前用户给当前loader传入的参数对象options
        const options = loaderUtils.getOptions(this);
    	return source;
    }

5、校验传入的options的值是不是符合要求

    const loaderUtils = require('loader-utils');
    const validate = require('schema-utils');
    let json = {
        "type": "object",
        "properties": {
            "content": {
                "type": "string",
            }
        }
    }
    module.exports = function (source) {
        const options = loaderUtils.getOptions(this);
    	// 第一个参数是校验的json 第二个参数是loader传入的options 第三个参数是当前loader的名称
        validate(json, options, 'first-loader');
        console.log(options.content)
    }
    // 当前规定 传入的options必须是一个对象 他里面的content的值必须是一个字符串 如果不满足要求则会有好的报错  xxx应该是一个什么类型

6、loader的返回其他结果

Loader有些场景下还需要返回除了内容之外的东西。

    module.exports = function(source) {
      // 通过 this.callback 告诉 Webpack 返回的结果
      this.callback(null, source, sourceMaps);
      // 当你使用 this.callback 返回内容时，该 Loader 必须返回 undefined，
      // 以让 Webpack 知道该 Loader 返回的结果在 this.callback 中，而不是 return 中 
      return;
    };

    this.callback(
        // 当无法转换原内容时，给 Webpack 返回一个 Error
        err: Error | null,
        // 原内容转换后的内容
        content: string | Buffer,
        // 用于把转换后的内容得出原内容的 Source Map，方便调试
        sourceMap?: SourceMap,
        // 如果本次转换为原内容生成了 AST 语法树，可以把这个 AST 返回，
        // 以方便之后需要 AST 的 Loader 复用该 AST，以避免重复生成 AST，提升性能
        abstractSyntaxTree?: AST
    );

7、同步与异步

Loader 有同步和异步之分，上面介绍的 Loader 都是同步的 Loader，因为它们的转换流程都是同步的，转换完成后再返回结果。但在有些场景下转换的步骤只能是异步完成的，例如你需要通过网络请求才能得出结果，如果采用同步的方式网络请求就会阻塞整个构建，导致构建非常缓慢。

    module.exports = function(source) {
        // 告诉 Webpack 本次转换是异步的，Loader 会在 callback 中回调结果
        var callback = this.async();
        someAsyncOperation(source, function(err, result, sourceMaps, ast) {
            // 通过 callback 返回异步执行后的结果
            callback(err, result, sourceMaps, ast);
        });
    };

8、处理二进制数据

在默认的情况下，Webpack 传给 Loader 的原内容都是 UTF-8 格式编码的字符串。但有些场景下 Loader 不是处理文本文件，而是处理二进制文件，例如 file-loader，就需要 Webpack 给 Loader 传入二进制格式的数据。为此，你需要这样编写 Loader：

    module.exports = function(source) {
        // 在 exports.raw === true 时，Webpack 传给 Loader 的 source 是 Buffer 类型的
        source instanceof Buffer === true;
        // Loader 返回的类型也可以是 Buffer 类型的
        // 在 exports.raw !== true 时，Loader 也可以返回 Buffer 类型的结果
        return source;
    };
    // 通过 exports.raw 属性告诉 Webpack 该 Loader 是否需要二进制数据 
    module.exports.raw = true;

9、缓存

在有些情况下，有些转换操作需要大量计算非常耗时，如果每次构建都重新执行重复的转换操作，构建将会变得非常缓慢。为此，Webpack 会默认缓存所有 Loader 的处理结果，也就是说在需要被处理的文件或者其依赖的文件没有发生变化时，是不会重新调用对应的 Loader 去执行转换操作的。

    module.exports = function(source) {
     // 关闭该 Loader 的缓存功能
       this.cacheable(false);
       return source;
    };

10、其它 Loader API

this.context：当前处理文件的所在目录，假如当前 Loader 处理的文件是 /src/main.js，则 this.context 就等于 /src。

this.resource：当前处理文件的完整请求路径，包括 querystring，例如 /src/main.js?name=1。

this.resourcePath：当前处理文件的路径，例如 /src/main.js。

this.resourceQuery：当前处理文件的 querystring。

this.target：等于 Webpack 配置中的 Target

this.loadModule：但 Loader 在处理一个文件时，如果依赖其它文件的处理结果才能得出当前文件的结果时，就可以通过 this.loadModule(request: string, callback: function(err, source, sourceMap, module)) 去获得 request 对应文件的处理结果。

this.resolve：像 require 语句一样获得指定文件的完整路径，使用方法为 resolve(context: string, request: string, callback: function(err, result: string))。

this.addDependency：给当前处理文件添加其依赖的文件，以便再其依赖的文件发生变化时，会重新调用 Loader 处理该文件。使用方法为 addDependency(file: string)。

this.addContextDependency：和 addDependency 类似，但 addContextDependency 是把整个目录加入到当前正在处理文件的依赖中。使用方法为 addContextDependency(directory: string)。

this.clearDependencies：清除当前正在处理文件的所有依赖，使用方法为 clearDependencies()。

this.emitFile：输出一个文件，使用方法为 emitFile(name: string, content: Buffer|string, sourceMap: {...})。完整API

手写简单的style-loader 和less-loader

    // 创建一个style标签里面放上源文件的样式字符串 插到页面上
    module.exports = function (source) {
        let script = (`
            let style = document.createElement("style");
            style.innerText = ${JSON.stringify(source)};
            document.head.appendChild(style);
        `);
        return script;
    }

    let less = require('less');
    module.exports = function (source) {
        this.cacheable();
        less.render(source, (err,result)=>{
            console.log(result.css);
            this.callback(err,result.css)
        })
    }

不要厌烦熟悉的事物,每天都进步一点;不要畏惧陌生的事物,每天都学习一点;