webpack 插件机制分析及开发调试

最新推荐文章于 2024-04-10 23:18:21 发布

chengbo_eva

最新推荐文章于 2024-04-10 23:18:21 发布

阅读量518

点赞数

分类专栏：前端文章标签： webpack 前端 node.js

本文链接：https://blog.csdn.net/lambert00001/article/details/131833550

版权

前端专栏收录该内容

86 篇文章 1 订阅

订阅专栏

webpack插件机制

webpack 插件机制是整个 webpack 工具的骨架，而 webpack 本身也是利用这套插件机制构建出来的。

插件概念

专注处理 webpack 在编译过程中某个特定任务的功能模块，可以称为插件。最常见的如 html-webpack-plugin 。

那么怎么样的一个东西可以称之为 webpack 插件呢？一个完整的 webpack 插件需要满足以下几点规则和特征：

·是一个独立的模块。
·模块对外暴露一个 js 函数。
·函数的原型 (prototype) 上定义了一个注入 compiler 对象的 apply 方法。
·apply 函数中需要有通过 compiler 对象挂载的 webpack 事件钩子，钩子的回调中能拿到当前编译的 compilation 对象，如果是异步编译插件的话可以拿到回调 callback。
·完成自定义子编译流程并处理 complition 对象的内部数据。
·如果异步编译插件的话，数据处理完成后执行 callback 回调。

Webpakck插件的基本模型

    // 1、BasicPlugin.js 文件（独立模块）
    // 2、模块对外暴露的 js 函数
    class BasicPlugin{
        //在构造函数中获取用户为该插件传入的配置
        constructor(pluginOptions) {
            this.options = pluginOptions;
        }
        //3、原型定义一个 apply 函数，并注入了 compiler 对象
        apply(compiler) {
            //4、挂载 webpack 事件钩子（这里挂载的是 emit 事件）
            compiler.plugin('emit', function (compilation, callback) {
                // ... 内部进行自定义的编译操作
                // 5、操作 compilation 对象的内部数据
                console.log(compilation);
                // 6、执行 callback 回调
                callback();
            });
        }
    }
    // 7、暴露 js 函数
    module.exports = BasicPlugin;

apply方法的由来

因为webpack中调用插件的方式就是plugin.apply()。

webpack部分源码：

https://github.com/webpack/webpack/blob/10282ea20648b465caec6448849f24fc34e1ba3e/lib/webpack.js#L35

    const webpack = (options, callback) => {
        ...
        for (const plugin of options.plugins) {
            plugin.apply(compiler);
        }
        ...
    }

入参Compiler对象解释

compiler 对象是 webpack 的编译器对象，compiler 对象会在启动 webpack 的时候被一次性的初始化，compiler 对象中包含了所有 webpack 可自定义操作的配置，例如 loader 的配置，plugin 的配置，entry 的配置等各种原始 webpack 配置等。

在 webpack 插件中的自定义子编译流程中，我们肯定会用到 compiler 对象中的相关配置信息，我们相当于可以通过 compiler 对象拿到 webpack 的主环境所有的信息。

webpack部分源码：

https://github.com/webpack/webpack/blob/10282ea20648b465caec6448849f24fc34e1ba3e/lib/webpack.js#L30

    // webpack/lib/webpack.js
    const Compiler = require("./Compiler")  
  
    const webpack = (options, callback) => {
        ...
        // 初始化 webpack 各配置参数
        options = new WebpackOptionsDefaulter().process(options) 

        // 初始化 compiler 对象，这里 options.context 为 process.cwd()
        let compiler = new Compiler(options.context)     

        // 往 compiler 添加初始化参数
        compiler.options = options         

        // 往 compiler 添加 Node 环境相关方法             
        new NodeEnvironmentPlugin().apply(compiler)

        for (const plugin of options.plugins) {
            plugin.apply(compiler);
        }
        ...
    }

区分Compilation 对象

compilation 实例继承于 compiler，compilation 对象代表了一次单一版本 webpack 构建和生成编译资源

(编译资源是 webpack 通过配置生成的一份静态资源管理 Map（一切都在内存中保存），以 key-value 的形式描述一个 webpack 打包后的文件。编译资源就是这一个个 key-value 组成的 Map)

的过程。

当运行 webpack 开发环境中间件时，每当检测到一个文件变化，一次新的编译将被创建，从而生成一组新的编译资源以及新的 compilation 对象。

一个 compilation 对象包含了当前的模块资源、编译生成资源、变化的文件、以及被跟踪依赖的状态信息。编译对象也提供了很多关键点回调供插件做自定义处理时选择使用。

Compiler 和 Compilation 的区别在于：Compiler 代表了整个 Webpack 从启动到关闭的生命周期，而 Compilation 只代表一次新的编译。

Tapable & Tapable 实例

webpack 的插件架构主要基于 Tapable 实现的，Tapable 是 webpack 项目组的一个内部库，主要是抽象了一套插件机制。

webpack 源代码中的一些 Tapable 实例都继承或混合了 Tapable 类。Tapable 能够让我们为 javaScript 模块添加并应用插件。它可以被其它模块继承或混合。它类似于 NodeJS 的 EventEmitter 类，专注于自定义事件的触发和操作。除此之外, Tapable 允许你通过回调函数的参数访问事件的生产者。

简单来说，就是我们熟悉的发布-订阅模式。这里暂不详细讲了，有点偏题～感兴趣的可以自行查找资料～

Plugin调用流程

1. 注册，类似于 EventEmitter 的 on

对应源码：

https://github.com/webpack/tapable/blob/42b520760e138c23e7808881cb4322557e878307/lib/Tapable.js#L35

    compiler.plugin('emit', (compilation, callback) => {
       // 在生成资源并输出到目录之前完成某些逻辑
    })

    // Tapable.js
    options => {
        ...
        if(hook !== undefined) {
            const tapOpt = {
                name: options.fn.name || "unnamed compat plugin",
                stage: options.stage || 0
            };
            if(options.async)
                // 将插件中 异步钩子的回调函数 注入
                hook.tapAsync(tapOpt, options.fn);
            else
                hook.tap(tapOpt, options.fn);
            return true;
        }
    };

2. 执行，类似于 EventEmitter 的emit

对应源码：

https://github.com/webpack/webpack/blob/e7c8fa414b718ac98d94a96e2553faceabfbc92f/lib/Compiler.js#L307

  this.hooks.emit.callAsync(compilation, err => {
      if (err) return callback(err);
      outputPath = compilation.getPath(this.outputPath);
      this.outputFileSystem.mkdirp(outputPath, emitFiles);
  });

开发调试Plugin&Loader

npm link

适合场景：Plugin&Loader

Npm link 专门用于开发和调试本地的 Npm 模块，能做到在不发布模块的情况下，将本地的一个正在开发的模块的源码链接到项目的 node_modules 目录下，让项目可以直接使用本地的 Npm 模块。由于是通过软链接的方式实现的，编辑了本地的 Npm 模块的代码，所以在项目中也能使用到编辑后的代码。

确保正在开发的本地 Loader 模块的 package.json 已经配置好(最主要的main字段的入口文件指向要正确)
在本地的 Npm 模块根目录下执行 npm link，将本地模块注册到全局
在项目根目录下执行 npm link loader-name ，将第 2 步注册到全局的本地 Npm 模块链接到项目的 node moduels 下，其中的 loader-name 是指在第 1 步的package.json 文件中配置的模块名称

Resolveloader

适合场景：loader

ResolveLoader 用于配置 Webpack 如何寻找 Loader ，它在默认情况下只会去 node_modules 目录下寻找。为了让 Webpack 加载放在本地项目中的 Loader, 需要修改 resolveLoader.modules。

    //假设本地项目中的 Loader 在项目目录的 ./loaders/loader-name 下
    module.exports = {
        resolveLoader:{
            //去哪些目录下寻找 Loader ，有先后顺序之分
            modules :['node modules','./loaders/'],
        }
    }