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

Posted 2022-08-31 凯小默

说明

玩转 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 i webpack@4.39.1 webpack-cli@3.3.6 -D

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