Webpack中Loader与Plugin

前言

 Webpack的核心功能是通过抽离出很多插件来实现的，因此系统内功能的划分粒度很细，这样做到了完美解偶同时又分工明确，代码容易维护。所以说插件机制是也是Webpack的核心知识，那么下面我们就来写介绍一下Loader与Plugin，并写一些常用的Loader和Plugin。

Loader

 对于Loader我们可以通过rules去匹配，哪些文件会被这个loader所处理。Loader本身就是一个函数，当webpack解析资源的时候，会调用相关的loader去处理，loader接收到文本内容作为参数，将处理完的内容进行返回出去。那么loader除了接收内容作为参数外，还有map代表sourcemap，以及meta代表别的loader传递的参数。
那么下面我们来开发一些Loader，去理解一下Loader的作用：

clean-log-loader

 我们在开发过程中会写很多的console.log去进行调试，但是对于打包的内容，我们不需要进行log控制台输出，所以我们通常对打包的内容清除掉console.log，那么我们可以开发一个清除log的loader。如下：

module.exports = function (content) {
  // 清除文件内容中console.log(xxx)
  return content.replace(/console\.log\(.*\);?/g, "");
};

 通过正则表达式将去匹配文件内容的console.log，将匹配的内容使用空字符串进行替换，实现打包后的内容清楚对应的console.log()

banner-loader

 比如说我们想对我们所编译打包的文件，都添加上作者信息，这个时候也是匹配对应的内容去做出修改，代码如下：

module.exports = function (content) {
  // 可以在Loader中预传递参数
  const options = this.getOptions({
    type: "object",
    properties: {
      author: {
        type: "string"
      }
    },
    additionalProperties: false
  });

  const prefix = `
    /*
    * Author: ${options.author}
    */
  `;

  return prefix + content;
};

 那么我们看到，里面是有对应的options的，我们可以在外层options中进行传递对应的参数，通过对rules去设置规则匹配所有的js文件，调用对应的loader，传递参数author，如下图所示：

file-loader

 这个是参照对应file-loader的源码所仿照的，首先我们需要定义为rawloader，因为图片和文件他们都是buffer数据，需要rawloader才可以去处理，实际是通过将内容去生成一个hash值作为文件名，然后通过emitFile将这个文件输出到对应的dist路径中，最后再通过mudule.exports这种commonJs将文件的路径去返回出去，当进行css解析引用这个图片时比如background-image:url(a.png)，通过css-loader再将引用的文件变为require(hash值.png)，代码如下：

const loaderUtils = require("loader-utils");

module.exports = function (content) {
  // 1. 根据文件内容生成带hash值文件名
  let interpolatedName = loaderUtils.interpolateName(this, "[hash].[ext][query]", {
    content,
  });
  interpolatedName = `images/${interpolatedName}`
  // console.log(interpolatedName);
  // 2. 将文件输出出去
  this.emitFile(interpolatedName, content);
  // 3. 返回：module.exports = "文件路径（文件名）"
  // 去替换文件
  return `module.exports = "${interpolatedName}"`;
};

// 需要处理图片、字体等文件。它们都是buffer数据
// 需要使用raw loader才能处理
module.exports.raw = true;

Plugin

 plugin是通过扩展webpack功能，加入自定义的构建行为，使得webpack可以执行更广泛的任务。webpack 在编译代码过程中，会触发一系列 Tapable 钩子事件，插件所做的，就是找到相应的钩子，往上面挂上自己的任务，也就是注册事件，这样，当 webpack 构建的时候，插件注册的事件就会随着钩子的触发而执行了。
 对于Plugin构建对象中有compiler和compilation，他们有着一些区别。

Compiler

compiler 对象中保存着完整的 Webpack 环境配置，每次启动 webpack 构建时它都是一个独一无二，仅仅会创建一次的对象。
这个对象会在首次启动 Webpack 时创建，我们可以通过 compiler 对象上访问到 Webapck 的主环境配置，比如 loader 、 plugin 等等配置信息。它有着以下属性：

• compiler.options 可以访问本次启动 webpack 时候所有的配置文件，包括但不限于 loaders 、 entry 、 output 、 plugin 等等完整配置信息。
• compiler.inputFileSystem 和 compiler.outputFileSystem 可以进行文件操作，相当于 Nodejs 中 fs。
• compiler.hooks 可以注册 tapable 的不同种类 Hook，从而可以在 compiler 生命周期中植入不同的逻辑。

compiler hooks文档如下：compiler hooks

Compilation

compilation 对象代表一次资源的构建，compilation 实例能够访问所有的模块和它们的依赖。
一个 compilation 对象会对构建依赖图中所有模块，进行编译。 在编译阶段，模块会被加载(load)、封存(seal)、优化(optimize)、 分块(chunk)、哈希(hash)和重新创建(restore)。
主要属性如下：

• compilation.modules 可以访问所有模块，打包的每一个文件都是一个模块。
• compilation.chunks chunk 即是多个 modules 组成而来的一个代码块。入口文件引入的资源组成一个 chunk，通过代码分割的模块又是另外的 chunk。
• compilation.assets 可以访问本次打包生成所有文件的结果。
• compilation.hooks 可以注册 tapable 的不同种类 Hook，用于在compilation 编译模块阶段进行逻辑添加以及修改。

生命周期

 通过生命周期，我们可以参照这个生命周期去在对应的时期，调用一些回调函数做一些操作，下面我们开发一些Plugin插件，再次之前，我们先普及几个compiler的钩子。

• make：compilation 结束之前执行。make 是 AsyncParallelHook, 也就是异步并行钩子, 特点就是异步任务同时执行。
• emit：输出 asset 到 output 目录之前执行。emit是AsyncSeriesHook，也就是异步串行钩子，特点就是异步任务顺序执行。
• compile：beforeCompile 之后立即调用，但在一个新的 compilation 创建之前。compile hook 是 SyncHook, 也就是同步钩子, 只能用tap注册。

带着这几个钩子，我们来开发一些插件：

相关插件

analyze-webpack-plugin

我们可以通过开发这个plugin，来去获取所有静态文件中的文件的大小，并将其输出到对应的文件中，代码如下：

class AnalyzeWebpackPlugin {
  apply(compiler) {
    compiler.hooks.emit.tap("AnalyzeWebpackPlugin", (compilation) => {
      // 1. 遍历所有即将输出文件，得到其大小
      /*
        将对象变成一个二维数组：
          对象：
            {
              key1: value1,
              key2: value2 
            }
          二维数组：
            [
              [key1, value1],
              [key2, value2]
            ]
      */
      const assets = Object.entries(compilation.assets);

      /*
          md中表格语法：
            | 资源名称 | 资源大小 |
            | --- | --- |
            | xxx.js | 10kb |
      */
      let content = `| 资源名称 | 资源大小 |
| --- | --- |`;

      assets.forEach(([filename, file]) => {
        content += `\n| ${filename} | ${Math.ceil(file.size() / 1024)}kb |`;
      });

      // 2. 生成一个md文件
      compilation.assets["analyze.md"] = {
        source() {
          return content;
        },
        size() {
          return content.length;
        },
      };
    });
  }
}

module.exports = AnalyzeWebpackPlugin;

我们首先通过compilation来获取assets对应输出的所有文件，通过Object.entries将文件这种key-value对象类型变为二维数组，然后我们通过遍历这个数组去计算文件大小拼接内容，最后将我们设置的文件输出到dist目录中。

banner-webpack-plugin

开发这个plugin的作用是给予打包输出的文件添加注释，我们需要在打包之前的钩子上，进行调用相对于的内容，可以通过compilation来获取assets这些资源文件。

class BannerWebpackPlugin {
  constructor(options = {}) {
    this.options = options;
  }

  apply(compiler) {
    // 在资源输出之前触发
    compiler.hooks.emit.tap("BannerWebpackPlugin", (compilation) => {
      // debugger;
      const extensions = ["css", "js"];
      // 1. 获取即将输出的资源文件：compilation.assets
      // 2. 过滤只保留js和css资源
      const assets = Object.keys(compilation.assets).filter((assetPath) => {
        // 将文件名切割 ['xxxx', 'js'] ['xxxx', 'css']
        const splitted = assetPath.split(".");
        // 获取最后一个文件扩展名
        const extension = splitted[splitted.length - 1];
        // 判断是否保护
        return extensions.includes(extension);
      });

      const prefix = `/*
        * Author: ${this.options.author}
        */
      `;
      // 3. 遍历剩下资源添加上注释
      assets.forEach((asset) => {
        // 获取原来内容
        const source = compilation.assets[asset].source();
        // 拼接上注释
        const content = prefix + source;

        // 修改资源
        compilation.assets[asset] = {
          // 最终资源输出时，调用source方法，source方法的返回值就是资源的具体内容
          source() {
            return content;
          },
          // 资源大小
          size() {
            return content.length;
          },
        };
      });
    });
  }
}

module.exports = BannerWebpackPlugin;

 可以看出我们筛选出即将输出的资源文件，将其过滤出js与css文件，然后去获取我们所传入的作者信息，将其与文件的内容拼接到一起，最后重定义对应资源对象，通过source方法返回出新的内容。