webpack-编写plugin

2021-06-05 01:03

阅读：626

标签：同步 run turn str div spec 清空 ati tor

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

webpack-编写plugin

标签：同步 run turn str div spec 清空 ati tor

原文地址：https://www.cnblogs.com/jingouli/p/12336272.html

上一篇：Lucene

下一篇：PHP中双引号引起的命令执行漏洞（Kuwebs代码审计）

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：webpack-编写plugin
文章链接：http://soscw.com/index.php/essay/90649.html

亲，登录后才可以留言！

webpack-编写plugin

评论

热门文章

推荐文章

最新文章

置顶文章