webpack原理篇（六十三）：插件基本结构介绍

class MyPlugin {  // 插件名称
    apply(compiler) {  // 插件上的 apply 方法
        compiler.hooks.done.tap('My Plugin', ( // 插件的 hooks
            stats /* stats is passed as argument when done hook is tapped. */
        ) => {
            console.log('Hello World!'); // 插件处理逻辑
        });
    }
}
module.exports = MyPlugin;

const path = require("path");
const DemoPlugin = require("./plugins/demo-plugin.js");
const PATHS = {
    lib: path.join(__dirname, "app", "shake.js"), build: path.join(__dirname, "build"),
};
module.exports = {
    entry: {
        lib: PATHS.lib,
    },
    output: {
        path: PATHS.build, filename: "[name].js",
    },
    plugins: [new DemoPlugin()],
};

module.exports = class DemoPlugin {
    constructor(options) {
        this.options = options;
    }
    apply() {
        console.log("apply", this.options);
    }
};

const path = require('path');
const MyPlugin = require('./plugins/my-plugin.js');
module.exports = {
    entry: './src/index.js',
    output: {
        path: path.join(__dirname, 'dist'),
        filename: 'main.js'
    },
    mode: 'production',
    plugins: [
        new MyPlugin({
            name: 'my plugin kaimo313'
        })
    ]
}

class MyPlugin {
    constructor(options) {
        this.options = options;
    }
    apply(compiler) {
        console.log('my plugin options---->', this.options);
    }
}
module.exports = MyPlugin;