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

说明

玩转 webpack 学习笔记

插件的运行环境

插件没有像 loader 那样的独立运行环境

只能在 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;

插件使用：

plugins: [ new 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()],
};

开发一个最简单的插件

​​src/demo-plugin.js​​

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

加入到 webpack 配置中

module.exports = {
  plugins: [new DemoPlugin({ name: "demo" })]
};

实战

1、新建项目

新建文件夹 my-plugin 文件夹，执行 ​​npm init -y​​

2、安装 webpack 环境

npm

3、添加 webpack.config.js 配置

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'
        })
    ]
}

4、添加 src 以及 my-plugin.js

src 里面添加 ​​index.js​​ 文件

新建 plugins 文件夹，里面添加 ​​my-plugin.js​​ 文件

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

5、运行构建

执行 ​​webpack​​