webpack-编写plugin

Posted 2021-03-08 金钩梨

当我们在做打包的时候，在某一些具体时刻，（如打包结束时生成一个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();
    })