plugin

  1. loader 的功能定位是转换代码，而一些其他的操作难以使用 loader 完成，比如：
    1. 当 webpack 生成文件时，顺便多生成一个说明描述文件；
    2. 当 webpack 编译启动时，控制台输出一句话表示 webpack 启动了；
    3. 当 xxxx 时，xxxx
  2. 这种类似的功能需要把功能嵌入到 webpack 的编译流程中，而这种事情的实现是依托于 plugin 的；

plugin 工作原理

  1. plugin 是一个带有 apply 方法的对象，在 webpack 初始化 的时候通过在生命周期的钩子中挂载函数实现扩展；

  2. Compiler 对象是在初始化阶段构建的，整个 webpack 打包期间只有一个 Compiler 对象，后续完成打包工作的是 Compiler 对象内部创建的 compilation；

  3. apply 方法会在 创建好 Compiler 对象后调用 ，并向方法传入一个 Compiler 对象；

  4. Compiler 对象提供了大量的钩子函数 （hooks 可以理解为事件），plugin 的开发者可以注册这些钩子函数，参与 webpack 编译和生成；

plugin 语法和使用

注册钩子函数

module.exports = class MyPlugin {
  apply(compiler) {
    // apply 只会执行一次，在这里注册事件
    compiler.hooks.事件名称.事件类型(name, function (compilation) {
      //事件处理函数
    })
  }
}

事件名称

即要监听的事件名，即钩子名，所有的钩子

事件类型

  1. 这一部分使用的是 Tapable API ，这个小型的库是一个专门用于钩子函数监听的库；

  2. 它提供了一些事件类型：

    1. tap：注册一个同步的钩子函数，函数运行完毕则表示事件处理结束；
    2. tapAsync：注册一个基于回调的异步的钩子函数，函数通过调用一个回调表示事件处理结束；
    3. tapPromise：注册一个基于 Promise 的异步的钩子函数，函数通过返回的 Promise 进入已决状态表示事件处理结束；

处理函数

处理函数有一个事件参数 compilation

练习：生成 md 文件（描述打包资源）

  1. 实现代码：

    JavaScript
    JavaScript
    // FileListPlugin.js
module.exports = class FileListPlugin {
    constructor(filename = "filelist.txt") {
        this.filename = filename;
    }

    apply(compiler) {
        compiler.hooks.emit.tap("FileListPlugin", complation => {
            var fileList = [];
            // complation.assets 获取文件列表
            for (const key in complation.assets) {
                var content = `【${key}】大小：${complation.assets[key].size() / 1000}KB`;
                fileList.push(content);
            }

            var str = fileList.join("\n\n");
            complation.assets[this.filename] = {
                source() {
                    return str
                },
                size() {
                    return str.length;
                }
            }
        })
    }
}

    // webpack.config.js
var FileListPlugin = require("./plugins/FileListPlugin");

module.exports = {
    mode: "development",
    devtool: "source-map",
    plugins: [
        new FileListPlugin("文件列表.md")
    ]
}

  2. 生成的文件 文件列表.md

    【main.js】大小：4.076KB

【main.js.map】大小：3.7KB
打赏作者
您的打赏是我前进的动力
微信
支付宝
评论

中午好👏🏻，我是 ✍🏻   疯狂 codding 中...

粽子

这有关于前端开发的技术文档和你分享。

相信你可以在这里找到对你有用的知识和教程。

了解更多

目录

  1. 1. plugin
  2. 2. plugin 工作原理
  3. 3. plugin 语法和使用
    1. 3.1. 注册钩子函数
    2. 3.2. 事件名称
    3. 3.3. 事件类型
    4. 3.4. 处理函数
  4. 4. 练习：生成 md 文件（描述打包资源）