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方法返回出新的内容。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蜡笔小开心

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值