【Webpack Plugin】写了个插件跟喜欢的女生表白，结果......

npm init //初始化项目
yarn add tapable -D //安装依赖

├── dist # 打包输出目录
├── node_modules
├── package-lock.json
├── package.json
└── src # 源码目录
     └── index.js # 入口文件

const { SyncHook } = require("tapable"); //这是一个同步钩子

//第一步：实例化钩子函数，可以在这里定义形参
const syncHook = new SyncHook(["author"]);

//第二步：注册事件1
syncHook.tap("监听器1", (name) => {
  console.log("监听器1:", name);
});

//第二步：注册事件2
syncHook.tap("监听器2", (name) => {
  console.log("监听器2", name);
});

//第三步：触发事件
syncHook.call("不要秃头啊");

监听器1 不要秃头啊
监听器2 不要秃头啊

class SyncHook {
  constructor() {
    this.taps = [];
  }

  //注册监听函数，这里的name其实没啥用
  tap(name, fn) {
    this.taps.push({ name, fn });
  }

  //执行函数
  call(...args) {
    this.taps.forEach((tap) => tap.fn(...args));
  }
}

if (options.plugins && Array.isArray(options.plugins)) {
  //这里的options.plugins就是webpack.config.js中的plugins
  for (const plugin of options.plugins) {
    plugin.apply(compiler); //执行插件的apply方法
  }
}

npm init //初始化项目
yarn add webpack webpack-cli -D

├── dist # 打包输出目录
├── plugins # 自定义插件文件夹
│   └── demo-plugin.js
├── node_modules
├── package-lock.json
├── package.json
├── src # 源码目录
│   └── index.js # 入口文件
└── webpack.config.js # webpack配置文件

class DemoPlugin {
  apply(compiler) {
    //在done（构建完成后执行）这个hook上注册自定义事件
    compiler.hooks.done.tap("DemoPlugin", () => {
      console.log("DemoPlugin：编译结束了");
    });
  }
}

module.exports = DemoPlugin;

{
  "name": "my_webpack_plugin",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "tapable": "^2.2.1",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  },
  "dependencies": {
    "chalk": "^4.2.0",
    "child_process": "^1.0.2"
  }
}

console.log("author："，"不要秃头啊");

const DemoPlugin = require("./plugins/demo-plugin");

module.exports = {
  mode: "development",
  entry: "./src/index.js",
  devtool: false,
  plugins: [new DemoPlugin()],
};

yarn build
$ webpack
DemoPlugin：编译结束了
asset main.js 643 bytes [emitted] (name: main)
./src/index.js 476 bytes [built] [code generated]
webpack 5.74.0 compiled successfully in 71 ms
✨  Done in 0.64s.

class DonePlugin {
  apply(compiler) {
    //在done（构建完成后执行）这个hook上注册自定义事件
    compiler.hooks.done.tap("DonePlugin", () => {
      console.log(
        "小姐姐，我知道此刻你很意外。但不知道怎么回事，我看见你的第一眼就沦陷了...可以给我一个多了解了解你的机会吗？ ————来自一个热心帮你解决问题的人"
      );
    });
  }
}
module.exports = DonePlugin;

const chalk = require("chalk");//给日志加颜色插件
const execSync = require("child_process").execSync;

const error = chalk.bold.red; //红色日志
const warning = chalk.keyword("orange"); //橘色日志

class DonePlugin {
  apply(compiler) {
    compiler.hooks.done.tap("DonePlugin", () => {
      //获取git账号信息的username
      let name = execSync("git config user.name").toString().trim();

      console.log(
        error(`${name},`),
        warning(
          "我知道此刻你很意外。但不知道怎么回事，我看见你的第一眼就沦陷了...可以给我一个多了解了解你的机会吗？  ————来自一个热心帮你解决问题的人"
        )
      );
    });
  }
}

module.exports = DonePlugin;