Webpack中Loader和Plugin

Webpack中Loader和Plugin

---

前言

Loader 与 Plugin 对应的概念：
loader 是文件加载器，能够加载资源文件，并对这些文件进行一些处理，诸如编译、压缩等，最终一起打包到指定的文件中
plugin 赋予了 webpack 各种灵活的功能，例如打包优化、资源管理、环境变量注入等，目的是解决 loader 无法实现的其他事
从整个运行时机上来看，如下图所示：

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、开发loader

Loader 的本质为函数，函数中的 this 作为上下文会被 webpack 填充，因此我们不能将 loader 设为一个箭头函数。一般在编写 loader 的过程中，保持功能单一，避免做多种功能。
函数接受参数：
1、content参数，为 webpack 传递给 loader 的文件源内容。
2、sourceMap参数，选填项.它将打包后的代码与源码链接起来,方便开发者调试,一般通过babel生成。
3、metameta额外信息,选填项。
函数中 this 是由 webpack 提供的对象，能够获取当前 loader 所需要的各种信息函数中有异步操作或同步操作，异步操作通过 this.callback 返回。示例如下：

// 导出一个函数，source为webpack传递给loader的文件源内容
module.exports = function (source, sourceMap, meta) {
  const content = doSomeThing(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; // 同步
};

二、开发 plugin

由于 webpack 基于发布订阅模式，在运行的生命周期中会广播出许多事件，插件通过监听这些事件，就可以在特定的阶段执行自己的插件任务。钩子函数包括如下部分：
（1）entryOption：在entry配置项处理前被调用，可以修改entry配置项；
（2）beforeRun：在运行编译器前被调用；
（3）run：在开始读取记录时被调用；
（4）emit：生成资源到output目录之前被调用；
（5）afterEmit：生成资源到output目录之后被调用；
（6）thisCompilation：在compilation创建之前被调用，可以用于注册额外的插件等；
（7）compilation：在compilation创建时被调用，用于注册一些回调等；
（8）normalModuleFactory：在normal module工厂创建之后被调用，可以在模块加载前完成一些准备工作；
（9）contextModuleFactory：类似于normalModuleFactory，但是用于动态上下文模块；
（10）beforeCompile：编译器开始编译之前被调用；
（11）compile：编译器开始编译时被调用；
（12）afterCompile：编译器完成编译之后被调用；
（13）watchRun：在watch模式编译器运行之前被调用；
（14）failed：当编译失败时被调用；
（15）done：同时编译和重新编译完成后被调用。

1.plugin示例

实现 plugin，也需要遵循一定的规范：
插件必须是一个函数或者是一个包含 apply 方法的对象，这样才能访问 compiler 实例
传给每个插件的 compiler 和 compilation 对象都是同一个引用，因此不建议修改
异步的事件需要在插件处理完任务时调用回调函数通知 Webpack 进入下一个流程，不然会卡住

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

      // do something...
    });
  }
}

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

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

总结

通过学习Webpack的编译阶段及其生命周期，我们了解到可以选择合适的阶段自定义loader 和 plugin来满足自身业务需求，并将其应用于项目中。