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>

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

關鍵字: 手寫 工程師 垃圾分類小課堂