webpack-编写plugin

当我们在做打包的时候,在某一些具体时刻,(如打包结束时生成一个html,使用HtmlWebpackPlugin;在打包之前,把dist目录清空,使用CleanWebpackPlugin)帮我们做一些事情。

1.初始化一个项目

2.新建plugins文件夹,下面新建copyright-webpack-plugin.js(plugin):

复制代码
class CopyrightWebpackPlugin{
        constructor(){ // 构造方法
            console.log('插件被使用了');
        }
        apply(compiler){ // 调这个插件时会执行apply方法,complier--webpack实例

    }
}

module.exports=CopyrightWebpackPlugin;
复制代码

3.webpack.config.js:

plugins:[
        new CopyrightWebpackPlugin()
    ]

4.进行打包,会发现输出--插件被使用了,说明我们的插件已经构造起来了

5.插件里面可以传递一些参数:

plugins:[
        new CopyrightWebpackPlugin({
            name:'hello world'
        })
    ]

6.得到参数:

constructor(options){
        console.log(options);
    }
    // 命令行会输出{name:'hello world'}

7.场景:在webpack打包结束,即将生成dist目录的时候额外增加一个copyright.txt的文件 在官网中有一个plugin的hooks(钩子):我们需求的时刻就是emit时刻,这是个异步的时刻:compilation里面有个属性assets包含了打包生成的所有内容,所以我们的需求就可以在这里面做文章:

apply(compiler){
        // compiler存放着配置的所有内容,包括打包的所有相关内容
        // compilation存放的是跟这次打包相关的内容
        compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation,cb)=>{
            console.log(123123);
            cb();
        })
    }

  执行打包命令我们会发现输出了   123123

  compilation里面有个属性assets包含了打包生成的所有内容,所以我们的需求就可以在这里面做文章:

复制代码
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation,cb)=>{
            compilation.assets['copyright.txt']={
                source:function(){
                    return 'copyright by jin goly'
                },
                size:function(){
                    return 21
                }
            }
            cb();
        })
复制代码

  执行打包命令会发现dist目录下多出一个copyright.txt文件。 同步时刻会有所差异,如compile:

compiler.hooks.compile.tap('CopyrightWebpackPlugin',compilation=>{
            console.log('hello world');
        });

8.使用node调试工具:

  在package.json中增加一个命令:

   "debug":"node --inspect --inspect-brk node_modules/webpack/bin/webpack.js",

   --inspect表示要开启node调试工具,

   --inspect-brk表示在webpack命令执行的时候在第一行打断点

  运行npm run debug后打开浏览器控制台,可以看到一个绿色图标,可点击进入调试 那么当我们想要看compilation里面有什么东西的时候就可以打一个断点:

复制代码
compiler.hooks.emit.tapAsync('CopyrightWebpackPlugin',(compilation,cb)=>{
        debugger;
        compilation.assets['copyright.txt']={
            source:function(){
                return 'copyright by jin goly'
            },
            size:function(){
                return 21
            }
        }
        cb();
    })
复制代码

 

posted @   金钩梨  阅读(573)  评论(0编辑  收藏  举报
编辑推荐:
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
阅读排行:
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· 语音处理 开源项目 EchoSharp
· 《HelloGitHub》第 106 期
· Spring AI + Ollama 实现 deepseek-r1 的API服务和调用
· 使用 Dify + LLM 构建精确任务处理应用
点击右上角即可分享
微信分享提示