03.05 webpack 工程师的自我修养：手写一个 webpack plugin

如果把 webpack 当成一个垃圾工厂，loader 就是垃圾分类，将所有垃圾整理好交给 webpack。plugin 就是如何去处理这些垃圾。

webpack 插件写起来很简单，就是你要知道各种各样的钩子在什么时候触发，然后你的逻辑写在钩子里面就 ok 了

• apply 函数是 webpack 在调用 plugin 的时候执行的，你可以认为它是入口
• compiler 暴露了和 webpack 整个生命周期相关的钩子
• Compilation 暴露了与模块和依赖有关的粒度更小的事件钩子

本节概要

• 实现一个 CopyPlugin
• 使用

实现一个 CopyPlugin

我们今天写一个 copy 的插件，在 webpack 构建完成之后，将目标目录下的文件 copy 到另一个目录下

<code>const fs = require("fs-extra");
const globby = require("globby"); // windows下请使用glob替换，用法基本一致

class CopyDirWebpackPlugin {
  constructor(options) {
    this.options = options;
  }
  apply(compiler) {
    const opt = this.options;
    compiler.plugin("done", stats => {
      if (process.env.NODE_ENV === "production") {
        (async () => {
          const toFilesPath = await globby([`${opt.to}/**`, "!.git/**"]);
          // 删除目标文件及其子文件
          toFilesPath.forEach(filePath => fs.removeSync(filePath));
          const fromFilesPath = await globby([`${opt.from}/**`]);
          fromFilesPath.forEach(fromPath => {
            const cachePath = fromPath;
            fromPath = fromPath.replace("dist", opt.to);
            const dirpaths = fromPath.substring(0, fromPath.lastIndexOf("/"));
            fs.mkdirpSync(dirpaths);
            fs.copySync(cachePath, fromPath);
          });
          console.log(`  完成copy ${opt.from} to ${opt.to}`);
        })();
      }
    }); 

  }
}

module.exports = CopyDirWebpackPlugin;/<code>

使用

将打包出来的 dist 目录下的内容 copy 到 dist2 目录下

<code>const CopyPlugin = require("../webapck-plugin-copy");

module.exports = ({ config }) => {
  return () => {
    config.plugin("copy-dist").use(CopyPlugin, [
      {
        from: "dist",
        to: "dist2"
      }
    ]);
  };
};/<code>

閱讀更多 前端在路上 的文章

關鍵字: 手写 工程师 垃圾分类小课堂