自定义webpack3插件plugins

之前的老项目有个需求，在用webPack 打包完之后需要复制一份 dist 文件到别到目录；经过查看webpack 文档，发现可以利用 webpack 的生命周期钩子来实现。

其中有个钩子为done ,意思为编译完成后执行。此时已经生成了dist 文件，只要再用node 把文件复制一遍即可。

官方文档：这是webpack 5 的写法，

这是webpack3的写法：在调用done的时候不同版本的写法有差异，搞了很长时间

class donePlugin {
    apply(compiler){
        compiler.plugin('done',function(){
            //复制文件的逻辑，此时文件已经编译完成
        })
    }
}

使用时需要在webpack.config.js 里面 plugins 里面new 一下，之后才能拿到 compiler 。如下：

//webpack3 的写法
plugins:[
    new donePlugin()
]

// webpack4 的写法

configureWebpack:{
        plugins:[
            new donePlugin()
        ],
},

引申：这也就是自定义插件的方法，可以在不同的钩子里面实现不同的需求。比如去掉console，alert 等等的插件也这是利用这种方法实现的。