浅析loader和plugin的本质、如何编写自定义的同步和异步的Loader、如何编写自定义的plugin及整个编译生命周期钩子

一、编写 Loader 和 Plugin 介绍及模板

1、Loader 本质及编写 Loader

　　在编写 Loader 前，我们首先需要了解 Loader 的本质。其本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 Loader 设为一个箭头函数。

　　函数接受一个参数，为webpack传递给Loader的文件源内容，函数中 this 是由 webpack 提供的对象，能够获取当前 Loader 所需要的各种信息。

　　函数中有异步操作或同步操作，异步操作通过 this.callback 返回，返回值要求为 string 或 buffer

　　代码如下所示：

// 导出一个函数，source为webpack传递给loader的文件源内容
module.exports = function(source) {
    const content = doSomeThing2JsString(source);
    // 如果 loader 配置了 options 对象，那么this.query将指向 options
    const options = this.query;
    // 可以用作解析其他模块路径的上下文
    console.log('this.context');
    /*
     * this.callback 参数：
     * error：Error | null，当 loader 出错时向外抛出一个 error
     * content：String | Buffer，经过 loader 编译后需要导出的内容
     * sourceMap：为方便调试生成的编译后内容的 source map
     * ast：本次编译生成的 AST 静态语法树，之后执行的 loader 可以直接使用这个 AST，进而省去重复生成 AST 的过程
     */
    this.callback(null, content); // 异步
    return content; // 同步
}

　　一般在编写 Loader 的过程中，保持功能单一，避免做多种功能。如 less 文件转换成 css 文件也不是一步到位，而是 less-loader、css-loader、style-loader 几个 Loader 的链式调用才能完成转换。

2、编写 plugin

　　对于 webpack 的 plugin 来说，它是是基于发布者订阅的设计模式，也可以说是基于事件驱动来实现的。在这个事件驱动里，代码之间的执行，是通过事件来进行驱动的。

　　由于webpack基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务。在之前也了解过，webpack 编译会创建两个核心对象：

1、compiler：包含了 webpack 环境的所有的配置信息，包括 options，loader 和 plugin，和 webpack 整个生命周期相关的钩子

2、compilation：作为 plugin 内置事件回调函数的参数，包含了当前的模块资源、编译生成资源、变化的文件以及被跟踪依赖的状态信息。当检测到一个文件变化，一次新的 Compilation 将被创建

　　如果自己要实现 plugin，也需要遵循一定的规范：

1、插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问 compiler 实例

2、传给每个插件的 compiler 和 compilation 对象都是同一个引用，因此不建议修改

3、异步的事件需要在插件处理完任务时调用回调函数通知 webpack 进入下一个流程，不然会卡住

　　实现 plugin 的模板如下：

class MyPlugin {
    // Webpack 会调用 MyPlugin 实例的 apply 方法给插件实例传入 compiler 对象
  apply (compiler) {
    // 找到合适的事件钩子，实现自己的插件功能
    compiler.hooks.emit.tap('MyPlugin', compilation => {
        // compilation: 当前打包构建流程的上下文
        console.log(compilation);
        // do something...
    })
  }
}

　　在 emit 事件发生时，代表源文件的转换和组装已经完成，可以读取到最终将输出的资源、代码块、模块及其依赖，并且可以修改输出资源的内容

二、如何编写一个简易的 Loader

1、入口文件代码：

　　我们先编写入口文件 index.js 的代码，使用很简单的代码示范：console.log(“hello monday”)

2、编写 loader

　　入口文件的内容很简单，我们想要达到的目的就是输出 hello monday 这个语句。现在，我们来编写 loader 的内容，以达到对入口文件index.js内容进行修改。 replaceLoader.js 文件的代码具体如下：

module.exports = function(source) {
    const result = source.replace('monday', 'mondaylab');
    this.callback(null, result);
}

　　以上的代码意思为，将入口文件 index.js 文件中的 monday 替换为 mondaylab 。这样写似乎没啥问题，但是有时候传的属性可能会很诡异，不一定每次都能像这样以字符串的形式来替换。

　　所以，我们引用 wedpack 官方推荐的 loaderUtils 这个工具，来解决这个问题：

// 1、第一步： 安装 loader-utils 插件
npm install loader-utils --save-dev

// 2、第二步： 改造loader文件。接下来对 replaceLoader.js 文件进行改造
const loaderUtils = require('loader-utils');
//用function的原因在于为了业务层可以调用this
//source为引入文件的源代码
module.exports = function(source) {
    //getOptions会自动地帮我们分析this.query，然后把参数的所有内容放在options里面去
    const options = loaderUtils.getOptions(this);
    const result = source.replace('monday', options.name);
    this.callback(null, result);
}

　　通过使用 loaderUtils 插件，调用 getOptions 方法，来自动的帮我们分析 this.query ，从而取到我们想要的内容。

　　值得注意的是，我们还需要再了解一下 this.callback 的内容。

　　一般情况下，如果我们接收到了源代码 source ，那么现在我们只能对源代码做处理。但是呢，有的时候，我们想要使用一些 sourceMap ，或者对源代码分析好了之后，我们不仅想要返回源代码，还要把 sourceMap 也带回去。

　　因为我们 return 的时候只能 return 一个参数，其余的一些额外的内容就带不出去了。这个时候呢，我们就需要 this.callback 来帮我们把 sourceMap 给带出去。因此，一般用 this.callback 来返回内容。

3、引用 loader

　　现在我们在 webpack.config.js 中，来引入我们上面的 loader

const path = require('path');
module.exports = {
    mode: 'development',
    entry: {
        main: './src/index.js'  // 入口文件就是 index.js
    },
    module: {
        rules: [{
            test: //.js/,
            use: [
                { // 自定义的loader路径
                    loader: path.resolve(__dirname, './loaders/replaceLoader.js'),
                    options: {
                        name: 'mondaylab'  //上面options.name中的name
                    }
                }   
            ]
        }]
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js' 
    }
}

　　通过以上方式，我们写了一个简易的 loader ，这个 loader 实现了将 monday 替换为 mondaylab 的功能。并且供我们在 webpack 中使用自己书写的 loader

4、如何在 loader 里做一些异步的操作？

　　如果我们想要给 loader 做一些异步操作，该怎么实现呢？

　　在我们所写的 loader 当中，加入异步操作，那么我们需要调用官方提供给我们的 this.async() 这个 api 来实现。我们来改造一下 replaceLoader.js 文件的代码

const loaderUtils = require('loader-utils');
module.exports = function(source) {
    const options = loaderUtils.getOptions(this);
    //调用this.async()这个API，来给异步代码使用
    const callback = this.async();
    setTimeout(() => {
        const result = source.replace('monday', options.name);
        callback(null, result);
    }, 1000);
}

　　通过这种方式，我们就可以在 loader 中编写异步代码，来达到我们想要的效果

5、loader 路径自定义

　　有一个很小的注意点就是，当我们在配置 webpack.config.js 文件中 loader 的路径时，每回都要 path.resolve 去寻找路径文件。文件少的时候还好，但如果遇到多文件的时候呢？岂不是会很麻烦。

　　所以，我们引用 resolveLoader 来简化它。现在我们在 webpack.config.js 文件中进行改造：

const path = require('path');
module.exports = {
    // 先到node_modules中去找，找不到则去./loaders目录下去找
    resolveLoader: {
        modules: ['node_modules', './loaders']
    },
    module: {
        rules: [{
            test: //.js/,
            use: [
                {
                    loader: 'replaceLoader'
                }
            ]
        }]
    }
}

　　通过配置 resolveLoader ，来对文件文件目录进行查找，从而简化了路径内容。

三、如何编写一个简易的 Plugin

　　在编写 Plugin 之前，我们需要先了解一下 Plugin 的特性：其本质是一个具有 apply 方法的 JS 对象。apply 方法会被 webpack compiler 调用，并且在整个编译生命周期都可以访问 compiler 对象。

const pluginName = 'ConsoleLogOnBuildWebpackPlugin';
class ConsoleLogOnBuildWebpackPlugin {
  apply(compiler) {
    compiler.hooks.run.tap(pluginName, (compilation) => {
      console.log('webpack 构建过程开始！');
    });
  }
}
module.exports = ConsoleLogOnBuildWebpackPlugin;

　　compiler hook 的 tap 方法的第一个参数，应是驼峰式命名的插件名称。

　　关于整个编译生命周期钩子，有如下：

entry-option ：初始化 option
run
compile： 真正开始的编译，在创建 compilation 对象之前
compilation ：生成好了 compilation 对象
make 从 entry 开始递归分析依赖，准备对每个模块进行 build
after-compile： 编译 build 过程结束
emit ：在将内存中 assets 内容写到磁盘文件夹之前
after-emit ：在将内存中 assets 内容写到磁盘文件夹之后
done： 完成所有的编译过程
failed： 编译失败的时候

　　如果需要在打包过程中的某些时刻，运行我们自定义的插件，就选用上面对应的生命周期钩子即可。

1、入口文件代码与上面 loader 一样：console.log(“hello monday”)

2、编写 plugin

class CopyrightWebpackPlugin {
    //编写一个构造器
    constructor(options) {
         console.log(options)
     }
    apply(compiler) {
        //遇到同步时刻
        compiler.hooks.compile.tap('CopyrightWebpackPlugin',() => {
            console.log('compiler');
        });
        //遇到异步时刻
        //当要把代码放到dist目录之前，要走下面这个函数
        //Compilation存放打包的所有内容，Compilation.assets放置生成的内容
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin', (Compilation, cb) => {
            // 往代码中增加一个文件，copyright.txt
            Compilation.assets['copyright.txt'] = {
                source: function() {
                    return 'copyright by monday';
                },
                size: function() {
                    return 19;
                }
            };
            cb();
        })
    }
}
module.exports = CopyrightWebpackPlugin;

3、引用 plugin

const path = require('path');
const CopyrightWebpackPlugin = require('./plugins/copyright-webpack-plugin');
module.exports = {
    mode: 'development',
    entry: { 
        main: './src/index.js'
    },
    plugins: [
        new CopyrightWebpackPlugin({
            name: 'monday'
        })
    ],
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].js'
    }
}

　　通过上述代码，我们可以了解到，在第二步编写 plugin 中，我们首先需要定义一个类，在类中写一个构造器和一个 apply() 方法来调用。

　　然后在第三步引用 plugin 中，通过 require 的方式，来进行 new 实例 ，实例化一个插件，从而在项目中使用这个插件。

　　最终，我们项目进行打包时，就会生成一个 dist 目录，并且在目录下增加一个 copyright.txt 文件，并且文件中的内容就是 copyrigt by monday