zoukankan      html  css  js  c++  java
  • webpack-自定义plugin

    Plugin:开始打包,在某个时刻,帮助我们处理一些什么事情得机制

    Plugin是一个类,里面包含一个apply函数,接受一个参数compiler(compiler包含打包过程得很多信息,比如生命周期的钩子)

    官方文档:https://webpack.js.org/contribute/writing-a-plugin/

    ##copyright-webpack-plugin
    
    class CopyrightWebpackPlugin {
        constructor(options){
            console.log(options)
        }
        apply(compiler){
            //官网有很多钩子,我们以emit为例
            compiler.hooks.emit.tapAsync(//异步操作的例子
                "CopyrightWebpackPlugin",
                (compilation,cb) => {
                    compilation.assets["copyright.txt"] = {  //打包后创建一个新文件 打包后会在dist下多一个copyright.txt文件  内容为 hello copy
                        source:function(){
                            return "hello copy"
                        },
                        size:function(){
                            return 20;
                        }
                    };
                    cb()
                }
            )
            //同步的例子
            compiler.hooks.compile.tap(
                "CopyrightWebpackPlugin",
                compilation => {
                    console.log("开始了")
                }
            )
        }
    }
    
    module.exports = CopyrightWebpackPlugin
    ##webpack.config.js
    
    const copyrightWebackPlugin = require('./myPlugins/copyright-webpack-plugin.js')
    
    module.exports = {
        plugins:[
            new copyrightWebackPlugin({
                'name':'Joy'
            })
        ]
    }
  • 相关阅读:
    Jasmine入门(上)
    手把手教你如何安装和使用Karma-Jasmine
    AngularJS入门之动画
    AngularJS入门之Services
    AngularJS入门之数据验证
    AngularJS入门之数据绑定
    AngularJS的Filter用法详解
    WPF快速实现XML可视化编辑工具
    AngularJS自定义Directive
    低级错误总结
  • 原文地址:https://www.cnblogs.com/znLam/p/13110076.html
Copyright © 2011-2022 走看看