function MyPlugin (options) {
    }
    MyPlugin.prototype.apply = compiler => {
    };
    module.exports = MyPlugin;

    class MyPlugin {
        constructor (options) {
        }
        apply (compiler) {
        }
    }
    module.exports = MyPlugin;

    compiler.hooks.someHook.tap("MyPlugin", params => {
        /* ... */
    });

/**
 * 在 webpack 的 watch 模式下觸發(fā)
 */
class WatchPlugin {
    
    apply (webpackCompiler) {
        
        // watchRun - 在監(jiān)聽模式下觸發(fā)，在一個 compilation 出現(xiàn)后，在 compilation 執(zhí)行前觸發(fā)
        webpackCompiler.hooks.watchRun.tapAsync("WatchPlugin", (compiler, callback) => {
            console.log(" 監(jiān)聽到了！ ");

            const mtimes = compiler.watchFileSystem.watcher.mtimes;
            if (!mtimes) return;
            // 通過正則處理，避免顯示 node_modules 文件夾下依賴的變化
            const mtimesKeys = Object.keys(mtimes).filter(path => !/(node_modules)/.test(path));
            if (mtimesKeys.length) {
                console.log(` 本次改動了 ${mtimesKeys.length} 個文件，路徑為：\n `, mtimes);
            }

            callback();
        });

        // watchClose - 在一個監(jiān)聽中的 compilation 結(jié)束時觸發(fā)
        webpackCompiler.hooks.watchClose.tap("WatchPlugin", () => {
            console.log(" 監(jiān)聽結(jié)束，再見！ ");
        });

    }

}

module.exports = WatchPlugin;

apply (compiler) {
    const outputPath = compiler.options.output.path;
}

/**
 * 獲取文件夾下所有的文件名（包括子級文件夾中的文件）
 * @param {string} dir 文件夾路徑
 */
readAllFiles (dir) {
    let fileList = [];

    const files = fs.readdirSync(dir);
    files.forEach(file => {
        const filePath = path.join(dir, file);
        const stat = fs.statSync(filePath);
        if (stat.isDirectory()) {
            fileList = fileList.concat(this.readAllFiles(filePath));
        } else {
            fileList.push(filePath);
        }
    });

    return fileList;
}

const fs = require("fs");
const path = require("path");

/** 每次編譯時刪除上一次編譯結(jié)果中不再需要的文件 */
class CleanPlugin {

    constructor (options) {
        this.options = options;
    }

    apply (compiler) {
        const pluginName = CleanPlugin.name;

        // 編譯輸出文件的路徑，根據(jù)此路徑可獲取對應(yīng)目錄下的所有文件
        const outputPath = compiler.options.output.path;
        const outputPathPrefix = path.basename(outputPath);
        const oldFiles = this.readAllFiles(outputPath);

        // console.log(" old files ", oldFiles);

        // done - 完成新的編譯后執(zhí)行，此時能獲取新的輸出文件與現(xiàn)有文件進行對比
        compiler.hooks.done.tap(pluginName, stats => {

            // 新的一次編譯完成后的輸出文件的相對路徑
            const newFiles = stats.toJson().assets.map(assets => fs.realpathSync(`${outputPathPrefix}\\${assets.name}`));

            // console.log(" new files ", newFiles);

            // 新舊文件對比，篩選出需要刪除的文件
            const removeFiles = [];
            oldFiles.forEach(oldFile => {
                if (newFiles.indexOf(oldFile) === -1) {
                    removeFiles.push(oldFile);
                }
            });

            // 刪除文件
            removeFiles.forEach(removeFile => fs.unlinkSync(removeFile));
        });
    }

    /**
     * 獲取文件夾下所有的文件名（包括子級文件夾中的文件）
     * @param {string} dir 文件夾路徑
     */
    readAllFiles (dir) {
        let fileList = [];

        const files = fs.readdirSync(dir);
        files.forEach(file => {
            const filePath = path.join(dir, file);
            const stat = fs.statSync(filePath);
            if (stat.isDirectory()) {
                fileList = fileList.concat(this.readAllFiles(filePath));
            } else {
                fileList.push(filePath);
            }
        });

        return fileList;
    }

}

module.exports = CleanPlugin;