webpack打包，生命周期回调插件

VIP文章 Gary GIS

已于 2022-07-04 16:07:26 修改

阅读量1k

点赞数 1

分类专栏：前端文章标签： webpack 前端

于 2022-07-01 11:15:43 首次发布

本文链接：https://blog.csdn.net/Tom_Jay/article/details/125554844

版权

背景介绍

最近在研究使用webpack打包js代码，有个需求是要在代码打包完成后，读取生成目录下的文件，动态生成一个入口文件，查了webpack的配置项和打包压缩插件的配置项，发现现有属性没有可以实现打包完成后的回调，又看了webpack的自定义插件的相关内容，于是自己开发了一个生命周期的回调插件

关键词

webpack打包，生命周期回调，打包过程回调、结束回调，webpack自定义插件

使用方法

const LifeCycleCallbackWebpackPlugin = require("./life-cycle-callback-webpack-plugin");
module.exports = {
	...
	plugins:[
		new LifeCycleCallbackWebpackPlugin({
			showLog:true,//显示日志
			doneCallback:function(){
				//打包完成后需要执行的内容
			},
			...
		})
	]
}

源码

const pluginName="LifeCycleCallbackWebpackPlugin";
class LifeCycleCallbackWebpackPlugin{
    constructor(options) {
        this.options=Object.assign({
            //allKindOfCallback:所有类型的callback函数
            showLog:true,
        },options)
    }
    apply(compiler){
        var that=this;
        // compiler.hooks.watching.tap(pluginName, function(compilation,data) {
        //     console.log("watching回调");
        //     that.options.watchingCallback && that.options.watchingCallback();
        // });
        compiler.hooks.entryOption.tap(pluginName, function(compilation,data) {
            that.options.showLog && console.log("entryOption回调");
            that.options.entryOptionCal